Угловая Scope в директивах

Учитывая это довольно простой угловой обертку для кнопки JQuery UI:Угловая Scope в директивах

angular.module('Sample.controllers', []) 
    .controller('mainController', ['$scope', 
    function($scope) { 
     $scope.jump = function() {alert("jump");}; 
    }]) 
    .directive('jquiwButton', function() { 
    return { 
     scope: {}, 
     restrict: 'A', 
     replace:true, 
     link: function(scope, element, attrs) { 
     var options = {}; 
     if (angular.isDefined(attrs["jquiDisabled"])) { 
      options.disabled = attrs["jquiDisabled"]; 
     } 

     if (angular.isDefined(attrs["jquiIconPrimary"])) { 
      if (!angular.isDefined(options.icons.primary)) { 
      options.icons ={}; 
      } 
      options.icons.primary = attrs["jquiIconPrimary"]; 
     } 

     if (angular.isDefined(attrs["jquiIconSecondary"])) { 
      if (!angular.isDefined(options.icons.secondary)) { 
      options.icons ={}; 
      } 
      options.icons.secondary = attrs["jquiIconSecondary"]; 
     } 

     if (angular.isDefined(attrs["jquiLabel"])) { 
      options.label = attrs["jquiLabel"]; 
     } 

     if (angular.isDefined(attrs["jquiText"])) { 
      options.text = attrs["jquiText"]; 
     } 

     element.button(options); 
     } 
    }; 
    }); 
    angular.module('Sample', ['Sample.controllers']);

И разметки.

<body ng-controller="mainController"> 
    <button jquiw-button jqui-label="Hello" ng-click="jump()">Hello</button> 
</body>

и он работает отлично, пока я не добавить область, в которой точку я теряю способность использовать стандартные угловые привязки к внешней области. В моем случае разметка `ng-click = 'jump()' теперь не будет работать, потому что не может найти скачок метода, который определяется во внешнем контексте, а не в области выделения. Теперь я знаю, что я могу специально привязать ng-click к внешней области, но я хочу избежать этого, поскольку он требует знания всех возможных директив, которые мне могут понадобиться для привязки.

Итак, мой вопрос: как разрешить другим директивам работать во внешнем пространстве, сохраняя при этом изоляцию?

plunker: http://plnkr.co/edit/eRoOeq?p=preview

Удалить линию 8: scope: {}, и нг-клик вызывает правильную функцию.

источник

2013-09-30 Nathaniel Johnson

Я не думаю, что это можно сделать .... все еще посмотрите, как реализуется ng-repeat .... –

Использование ng-click="$parent.jump()".

источник

2013-09-30 02:37:20 zsong

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

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

Вы можете ссылаться на функцию в родительской области изнутри области изоляции с помощью привязки &. Это правильный способ вызова функции из области выделения внутри директивы according to the directive documentation.

Я создал working CodePen example, чтобы продемонстрировать, что он работает безупречно.

Вот соответствующие части:

var app = angular.module('app', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.jump = function() { 
    alert('jump called'); 
    }; 
}); 

app.directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     call: '&' 
    }, 
    link: function postLink(scope, element, attrs) { 
     scope.call(); 
    } 
    }; 
});

и в шаблоне:

<section ng-app="app" ng-controller="MainCtrl"> 
    <my-directive call="jump()"></my-directive> 
</section>

Я надеюсь, что это помогает.

источник

2013-09-30 02:48:47

Но разве это не требует передовых знаний и сопоставления этих внешних директив? Другими словами, я могу не знать, что пользователь собирается привязать ng-blur или ng-change, и поэтому этот метод потребует предварительного знания всех возможных привязок, а затем их вручную привязать. –

Если я правильно понимаю ваш вопрос, вы беспокоитесь о чем-то, чего никогда не должно быть. Если вы создаете новую директиву, то вы диктуете использование. Если другой разработчик размещает 'ng-click' или' ng-blur' на вашем элементе, не консультируясь с вашей директивной документацией, тогда у них есть свои шансы. Потенциальные пользователи вашей новой директивы должны знать, что ваша директива использует определенные атрибуты. –

Я полагаю, что это правда, но по-прежнему требуется, чтобы я писал код привязки для каждой директивы, даже если я не делаю ничего, кроме того, что обычно будет делать в директиве - это может быть функция дизайна, и ответ: «Не используйте если вы не хотите изолировать свою директиву от такого рода вещей ». который, кажется, имеет место. Кажется, изоляция области действительно состоит в том, чтобы изолировать. –

Угловая Scope в директивах

ответ

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