AngularJS создать область действия директивы с значением переменной родительского контроллера

Можно ли передать параметр директиве и установить это значение в качестве области действия?AngularJS создать область действия директивы с значением переменной родительского контроллера

Пример:

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>

Поэтому я хочу, чтобы это сделать, у меня есть несколько экземпляров одного и того же директивы и каждый из них должен изменить значение, переданное в качестве параметра из родительской области.

Любые мысли?

источник

2015-08-28 Catalin MUNTEANU

И вы хотите изменения внутри этих директив должны быть видимыми в родительском пространстве? Я хотел бы увидеть код шаблона для этих директив, так как я не могу себе представить, зачем вам это нужно. Было бы полезно узнать, какую двустороннюю привязку данных вы ожидаете от решения. –

Изменения этих директив видны в коде шаблона директивы. В контроллере я загружаю и сохраняю их при загрузке и выходе приложения. –

Это не помогает мне понять ваше ожидаемое поведение. Если изменения должны быть видны только внутри директив, то вторая версия ответа Пауля Бутса может быть уместна, даже если двусторонняя привязка данных, которую он использует, в этом случае является устаревшей. Если вам нужно, чтобы изменения отображались вне области действия директивы, вы должны добавить наблюдателей к его решению. –

Вы должны использовать привязку данных двусторонней связи.

В вашей директиве вы можете указать область изоляции и использовать синтаксис =, что очень полезно.

Контроллер

(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

источник

2015-08-28 10:26:30

Спасибо за этот ответ, но это не то, что я пытаюсь выполнить. Объем директивы должен быть равен значению переменной, заданной как параметр. Поэтому доступ к 'scope.data' в директиве не поможет. Мне нужно иметь «scope.key1». –

Обратите внимание, что это будет иметь данные ключа, определенные в области, а не клавиши key1 и key2, как указано в вопросе. –

@CatalinMunteanu Я обновил свой код, чтобы соответствовать вашей проблеме. Теперь вы можете получить доступ к 'scope.key1',' scope.key2' в свою директиву. –

AngularJS создать область действия директивы с значением переменной родительского контроллера

ответ

Смежные вопросы