Question

是否可以将参数传递给指令并将该值设置为指令范围？

示例：

angular
.module('app', [])
.controller('CTRL', function($scope) {
    $scope.some_value = {
        instance1: {
            key1: 'value11',
            key2: 'value12'
        },
        instance2: {
            key1: 'value21',
            key2: 'value22'
        },
    };
})
.directive('uiClock', function() {
    return {
        restrict: 'E',
        scope: {},
        template: template,
        link: function(scope, element, attr) {

            // scope should now contain either (first directive)
            // {
            //    key1: 'value11',
            //    key2: 'value12'
            // }
            // or (second directive)
            // {
            //    key1: 'value21',
            //    key2: 'value22'
            // }
            console.log(scope);

        }
    };
});

<div ng-controller="Ctrl">
    <ui-clock ng-bind="some_value.instance1"></ui-clock>
    <ui-clock ng-bind="some_value.instance2"></ui-clock>
</div>

我想这样做的原因是我有多个相同指令的实例，每个都应该修改从父作用域传递的参数值。

有什么想法吗？

Answer 1

您应该使用双向数据绑定。

在您的指令中，您可以指定隔离范围，并使用=语法，这非常有用。

<强>控制器

(function(){

function Controller($scope) {

  $scope.some_value = {
      instance1: {
          key1: 'value11',
          key2: 'value12'
      },
      instance2: {
          key1: 'value21',
          key2: 'value22'
      },
  };

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

<强>指令

(function(){

  function directive($compile) {
    return {
        restrict: 'E',
        scope: {
          data: '='
        },
        templateUrl: 'template.html',
        link: function(scope, element, attr) {
          var elm = angular.element(element);
          //For all key in scope.data
          Object.keys(scope.data).forEach(function(key){
            //Create a new property for our isolate scope
            scope[key] = scope.data[key];
            //Add attr to our element
            elm.attr(key, scope[key]);
          });
          //Remove our data attribute
          elm.removeAttr('data');

          //Then we can access to scope.key1 & scope.key2
          console.log(scope.key1);
          console.log(scope.key2);

        }
    };
  }

angular
  .module('app')
  .directive('directive', directive);

})();

<强>模板

<div>Key 1 : {{key1}}</div>
<div>Key 2 : {{key2}}</div>

然后，您可以通过将特定数据传递到我们的隔离范围来调用您的指令。如果需要，可以删除父元素的data属性，并将其替换为对象的值。

<强> HTML

  <body ng-app='app' ng-controller="ctrl">

    <directive data='some_value.instance1'></directive>
    <directive data='some_value.instance2'></directive>

  </body>

如果您检查了directive元素，则data属性将被移除并替换为key1 = value...等...

您可以看到Working Plunker

AngularJS使用父控制器变量

1 个答案: