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

Question

我想创建一个动态的指令。在此指令中，定义具有input元素的模板。实际上，此元素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) {
            }
        }
    });

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

       })
     }
  }
});

其次，如果您希望拥有动态model，则应使用scope: {name: '='}作为@进行一次性绑定

修改

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

这是一个demo

Answer 2

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

} }）;