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

0

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

Пример:

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>

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

Есть предположения?

  • 0
    И вы хотите, чтобы изменения внутри этих директив были видны в родительской области? Я хотел бы увидеть код шаблона для этих директив, так как не могу себе представить, зачем вам это нужно. Было бы полезно узнать, какого рода двустороннюю привязку данных вы ожидаете от решения.
  • 0
    Изменения этих директив видны в коде шаблона директивы. В контроллере я загружаю и сохраняю их при загрузке и выходе приложения.
Показать ещё 1 комментарий
Теги:
angularjs-directive

1 ответ

2

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

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

контроллер

(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... т.д....

Вы можете увидеть Рабочий Плункер

Поделиться
  • 0
    Спасибо за этот ответ, но это не то, чего я пытаюсь достичь. Область действия директивы должна быть равна значению переменной, заданной в качестве параметра. Так что доступ к scope.data в директиве не поможет. Мне нужно иметь scope.key1 .
  • 0
    Обратите внимание, что для этого будут определены ключевые данные в области, а не ключи key1 и key2, как было запрошено в вопросе.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню