Question

这里我创建了一些示例..在这个示例1中我直接放了 //{{arr.Description}} 像这样它的工作，但通过指示它不工作我做了什么错误能解释一下吗？谢谢朋友们

var app = angular.module('components', []);
   app.directive('subpane', function() {
    return {
      restrict: 'E',
      scope: { 
          array: '@' 
       },
      template:'<li ng-repeat="arr in array">{{arr.Description}}</li>',
      
      link: function(scope) {

      }
      
    };
  })
  app.controller('tabController', ['$scope', function ($scope) {
           $scope.array =[{
                          "title": 0,
                          "Description": "Select your option"
                        },
                        {
                          "title": 1,
                          "Description": "Male"
                        },
                        {
                          "title": 2,
                          "Description": "Female"
                        },
                        {
                          "title": 3,
                          "Description": "Unknown"
                        }];
  }])

 <script data-require="angular.js@~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<body ng-app="components" ng-controller="tabController">

<span>Example 1 Working fine</span>
<li ng-repeat="arr in array">{{arr.Description}}</li>

<span>Example 2 Not Working.. Here also same thing only i did via directive.. why this is not working?</span>

 <subpane array={{array}}></subpane>
 
</body>

Answer 1

使用＆＃39; =＆＃39;对于范围参数并删除＆＃39; {{}}＆＃39;在标记中。

＆＃13;

var app = angular.module('components', []);
   app.directive('subpane', function() {
    return {
      restrict: 'E',
      scope: { 
          array: '=' 
       },
      template:'<li ng-repeat="arr in array">{{arr.Description}}</li>',
      
      link: function(scope) {

      }
      
    };
  })
  app.controller('tabController', ['$scope', function ($scope) {
           $scope.array =[{
                          "title": 0,
                          "Description": "Select your option"
                        },
                        {
                          "title": 1,
                          "Description": "Male"
                        },
                        {
                          "title": 2,
                          "Description": "Female"
                        },
                        {
                          "title": 3,
                          "Description": "Unknown"
                        }];
  }])

＆＃13;

 <script data-require="angular.js@~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<body ng-app="components" ng-controller="tabController">

<span>Example 1 Working fine</span>
<li ng-repeat="arr in array">{{arr.Description}}</li>

<span>Example 2 Not Working.. Here also same thing only i did via directive.. why this is not working?</span>

 <subpane array=array></subpane>
 
</body>

＆＃13;

Answer 2

你需要添加＆＃34; plain：true＆＃34;在指令中，如果你不使用templateUrl

  app.directive('subpane', function() {
  return {
    restrict: 'E',
    scope: { 
        array: '=' // = not @, = is for object/array ; = is for text/number.
     },
    template:'<li ng-repeat="arr in array">{{arr.Description}}</li>',
    plain: true,
    link: function(scope) {

    }

  };
})

在html中不要将{{}}放在参数数组

中

<subpane array="array"></subpane>

Answer 3

camden_kid发布了一个可接受的答案，但可能不是最好的答案。在您的模板中：

<subpane array={{array}}></subpane>

必须有引号：

<subpane array="{{array}}"></subpane>

请注意，camden_kid建议更改

scope: { 
    array: '@' 
}

到

scope: { 
    array: '=' 
}

这是双重绑定所需要的，只有当您必须以任何方式编辑原始值（在父范围内）时才需要指令的孤立范围。

您可能应该仔细阅读文档：https://docs.angularjs.org/guide/directive

为什么不工作？以下angularjs示例

3 个答案: