javascript - 如何在angularjs指令中使用动态模板

Question

我想创建一个动态指令。在此指令中定义一个具有输入元素的模板。事实上这个元素 ng-model 必须是动态的，并且在 Controller 中使用 $scope.name 。

app.directive('helloWorld', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
              name: '@',
              path:'@',
        },
        template: '<input\
             type="text"\
             name="{{name}}"\
             ng-model="{{name}}"\
              />\,
        link: function(scope, elem, attrs) {

        },
        controller:{
          $scope.$watch($scope.name, function (newValue, oldValue) {
            }
        }
    });

Answer 1

A working JSFiddle

代码

var app = angular.module('app',[])
app.directive('helloWorld', function() {
   return {
   restrict: 'E',
scope: {
     name: '@',
     path:'@',
  },

   template: '<input type="text" name="{{name}}" ng-model="name"/> {{name}}',
 controller: function($scope) {
   $scope.name = "initial value";
   $scope.$watch('name', function (newValue, oldValue) {
       console.log("newValue: ",newValue);
   })
 }       

} });