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

我想创建一个动态的指令。在此指令中，定义具有输入元素的模板。事实上，这个元素

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) {
            }
        }
    });

app.directive（'helloWorld'，function（）{
返回{
限制：'E'，
替换：正确，
范围：{
名称：“@”，
路径：“@”，
},
模板：'\'，
链接：功能（范围、要素、属性）{
},
控制器：{
$scope.$watch（$scope.name，函数（newValue，oldValue）{
}
}
});

首先，您的指令语法错误，下面是正确的：

app.directive('helloWorld', function() {
   return {
     restrict: 'E',
      scope: {
        name: '@',
        path:'@',
      },
     template: '<input type="text" name="{{name}}" ng-model="name">',
     link: function(scope, elem, attrs) {
  
     },
     controller: function($scope) {
       $scope.name = 'asd';
       $scope.$watch('name', function (newValue, oldValue) {

       })
     }
  }
});

app.directive（'helloWorld'，function（）{
返回{
限制：'E'，
范围：{
名称：“@”，
路径：“@”，
},
模板：“”，
链接：功能（范围、要素、属性）{
},
控制器：功能（$scope）{
$scope.name='asd'；
$scope.$watch（'name'，函数（newValue，oldValue）{
})
}
}
});

其次，如果您希望拥有一个动态的

模型

，那么应该使用

范围：{name:'='}

，因为

@

用于一次性绑定

编辑 将模板中的

name=“name

更改为

name=“{{{name}}”

这是一个

代码

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);
   })
 }       

var-app=angular.module（'app'，[]）
app.directive（'helloWorld'，function（）{
返回{
限制：'E'，
范围：{
名称：“@”，
路径：“@”，
},
模板：“{name}}”，
控制器：功能（$scope）{
$scope.name=“初始值”；
$scope.$watch（'name'，函数（newValue，oldValue）{
log（“newValue:，newValue”）；
})
}       

}

---

})

到底是什么不起作用？@Razvan Balosin此错误在控制台中出现：错误：[$parse:syntax]？对于名称属性，其工作正常，但对于ng模型，则不工作：（@hadi抱歉，我的答案中也有一些拼写错误，刚刚更新it@YonatanAyalon忽略你在这里粗鲁无礼的事实，这个名字没有更新，因为我忘记了

{}

。您的案例只是一个非常糟糕的例子，使用另一个输入设置model@YonatanAyalon此外，在我的答案中发现一个小错误并加以纠正并将其作为你自己的答案这也不是一个好的做法。@YonatanAyalon此外，你的答案应该包含

编辑内容
显示你在代码中所做的更改，否则，所有他对你的问题的评论和投票对其他人来说没有任何意义。这不起作用，你必须创建另一个输入来设置模型；）刚刚编辑，现在模型也从指令中设置