AngularJS用父控制器变量的值创建指令作用域

AngularJS create directive scope with value of parent controller variable

本文关键字：创建 指令 作用域 变量 控制器 AngularJS      更新时间：2023-09-26

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

的例子:

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>

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

任何想法吗?

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

在你的指令中，你可以指定一个隔离作用域，并使用=语法，这是非常有用的。

控制器

(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属性，并将其替换为您的对象的值。

  <body ng-app='app' ng-controller="ctrl">
    <directive data='some_value.instance1'></directive>
    <directive data='some_value.instance2'></directive>
  </body>

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

你可以看到工作活塞

相关文章：