Question

我有一个指令，通过类似的属性传递对范围数据的引用（假设存在$scope.parent.child）： <span status-label item='parent.child'></span>

该指令在使用一次时按预期工作。但是当使用多次，并且具有不同的item属性值时，使用该指令的所有元素都显示相同的值。

我的完整代码如下，一个Plunker在这里：http://plnkr.co/edit/9ahmua?p=preview。如果您注意到，使用指令（第8行）更改第二个元素的item=值会将所有元素的值更改为该值。

我做错了什么？如何使每个元素/指令脱离其各自的item属性？感谢。

<!DOCTYPE html>
<html ng-app='familyApp'>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div ng-controller='BaseController'>
      <p>{{ parent.child.name }}: <span status-label item='parent.child'></span></p>
      <p>{{ root.name }}: <span status-label item='root'></span></p>
    </div>
  </body>
    <script data-require="jquery@1.7.1" data-semver="1.7.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.angularjs.org/1.2.12/angular.js" data-semver="1.2.12" data-require="angular.js@1.2.12"></script>
    <script>
    var familyApp = angular.module('familyApp', []);
      angular.module('familyApp').controller('BaseController',
        function ($scope) {
          $scope.root = {
            name: 'Jack',
            age: 40,
            flagged: false
          };   
          $scope.parent = {
            child: {
              name: 'Jill',
              age: 30,
              flagged: true
            }
          };          
        });
      angular.module('familyApp').directive('statusLabel',
        function ($compile, $parse) {
            return {
                link: function (scope, element) {
                    scope.status = function (item) {
                        item = $parse(element.attr('item'))(scope);
                        if (item.flagged === true) {
                          return 'flagged';
                        }
                        return 'clean';
                    };
                },
                transclude: true,
                template: '<div ng-switch on="status()"><div ng-switch-when="flagged">Flagged</div><div ng-switch-when="clean">Clean</div></div>'
            };
        });
    </script>
</html>

Answer 1

您需要通过将范围设置为某个内容来为该指令指定它自己的范围。

您可以详细了解here

AngularJS：使用指令的所有元素都显示相同的值

1 个答案: