Как изменить область действия внутри директивы в AngularJs

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

HTML

 

JavaScript

 angular.module('app', []) .directive("customTag", [function () { return { restrict: "E", replace: true, template: "", link: function (scope, element, attrs) { element.bind('click', function () { scope[attrs.selectedItem] = "New value"; scope.$apply(); }); } }; }]); function AppController($scope) { $scope.selected = 'Old value'; } 

Скрипт: http://jsfiddle.net/nJ7FQ/

Моя цель – показать «Новое значение» в области «Выбранные». Как я могу выполнить то, что я пытаюсь сделать? Что я делаю не так?

Кроме того, поскольку я пытаюсь создать компонент. Есть ли способ сделать то же самое, но с изолированной областью?

Я обновил скрипку, в основном должен был перейти к родительскому, чтобы получить правильную «выбранную» переменную, также использовал изоляцию scope =, чтобы получить двухстороннюю привязку между переданным значением и внутренней моделью.

http://jsfiddle.net/nJ7FQ/2/

 angular.module('app', []) .directive("customTag", [function () { return { restrict: "E", replace: true, template: "", scope: {model:'='}, link: function (scope, element, attrs) { element.bind('click', function () { scope.model[attrs.selectedItem] = "New value"; scope.$apply(); }); } }; }]); function AppController($scope) { $scope.selected = 'Old value'; } 

и HTML

 

Selected: {{ selected }}

Item: {{ selected }}

Worked

Обновлен скрипт, чтобы использовать оригинальное считывание свойства из атрибута: http://jsfiddle.net/nJ7FQ/4/

Я немного улучшил jsfiddle:

 angular.module('app', []) .directive("customTag", ['$parse', function ($parse) { return { restrict: "E", replace: true, template: "", link: function (scope, element, attrs) { element.bind('click', function () { scope.$apply(function () { $parse(attrs.selectedItem).assign(scope.$parent, "New value"); }); }); } }; }]); function AppController($scope) { $scope.selected = { 'foo': 'Old value' }; } 

http://jsfiddle.net/nJ7FQ/15/

Таким образом, значение области, которое вы хотите изменить, также может быть свойством объекта, например selected.foo . Кроме того, я удалил параметр scope и сказал директиве всегда использовать родительскую область. И, наконец, я завернул обработчик кликов в обратный вызов $apply (см. Здесь, например). Лучше было бы, конечно, использовать ngClick вместо element.bind() .

  • Конфигурация данных с координатами angularjs между controllerами
  • AngularJS: $ q -> отложенный API-код вещей (жизненный цикл) И кто вызывает дайджест?
  • Как установить атрибут id элемента HTML динамически с помощью angularjs (1.x)?
  • Как обнаружить браузер с помощью angularjs?
  • Обновить переменную родительской области в угловом
  • 'this' vs $ scope в controllerах AngularJS
  • Давайте будем гением компьютера.