如何在AngularJS指令中使用动态模板？

Question

我想创建一个动态指令。在这个指令中定义一个模板，其中包含一个输入元素。实际上该元素的 ng-model 必须是动态的，并使用控制器中的 $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) {
            }
        }
    });

- Hadi J

---

那具体是什么出了问题？ - Razvan B.

@Razvan Balosin 这个错误出现在控制台中: Error: [$parse:syntax] http://errors.angularjs.org/1.3.14/$parse/syntax? - Hadi J

Answer 1

首先，您的指令语法有误，这是正确的：

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

       })
     }
  }
});

其次，如果您想要一个动态的模型，您应该使用 scope: {name: '='}，因为 @ 是一次性绑定。

编辑

在模板中将 name="name 更改为 name="{{name}}"

这里是一个 demo。

- Razvan B.

---

对于name属性，它能正常工作，但是对于ng-model却不起作用 :( - Hadi J

@hadi 抱歉，我的回答中也有一些错别字，我刚刚更新了它。 - Razvan B.

@YonatanAyalon 忽略你在这里的粗鲁，名称没有更新是因为我忘记了 {{ }}。你的情况只是一个很糟糕的例子，使用另一个输入来设置模型。 - Razvan B.

@YonatanAyalon，此外，在我的回答中发现并修正一个小错误，并将其变成自己的回答也不是一个好的做法。 - Razvan B.

@YonatanAyalon 此外，您的答案应包含“编辑”，显示您在代码中所做的更改，否则，对您的问题的所有评论和投票对其他人来说都没有意义。 - Razvan B.

Answer 2

一个可用的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);
   })
 }       

} });

- Yonatan Ayalon

---

这个不行，你需要创建另一个输入来设置模型 ;) - Razvan B.

刚刚编辑完，现在指令也正在设置模型。 - Yonatan Ayalon