Викликати функцію контролера з директиви без ізольованого обсягу в AngularJS

Здається, я не можу знайти спосіб викликати функцію в батьківській області зсередини директиви, не використовуючи ізольовану область. Я знаю, що якщо я використовую ізольовану область, я можу просто використовувати "&" в ізольованій, щоб отримати доступ до функції батьківської області, але використання ізольованої області, коли це не потрібно, має наслідки. Розгляньте такий HTML:

<button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>

У цьому простому прикладі я хочу показати діалогове вікно підтвердження JavaScript і викликати doIt () лише тоді, коли вони натискають "OK" у діалоговому вікні підтвердження. Це просто, використовуючи ізольований обсяг. Директива буде виглядати так:

.directive('confirm', function () {
    return {
        restrict: 'A',
        scope: {
            confirm: '@',
            confirmAction: '&'
        },
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(scope.confirm)) {
                    scope.confirmAction();
                }
            });
        }
    };
})

Але проблема в тому, що я використовую ізольовану область, ng-hide у наведеному вище прикладі більше не виконується проти батьківської області , а в ізольованій області (оскільки використання ізольованої області для будь-якої директиви змушує всі директиви щодо цього елемента використовувати ізольований приціл). Ось jsFiddle наведеного вище прикладу, коли ng-hide не працює. (Зверніть увагу, що в цій скрипці кнопка повинна приховуватись, коли ви вводите "так" у поле введення.)

Альтернативою було б НЕ використовувати ізольовану область дії , що насправді я справді хочу тут, оскільки немає необхідності в тому, щоб сфера дії цієї директиви була ізольованою. Єдина проблема у мене - як викликати метод у батьківській області, якщо я не передаю його в ізольовану область ?

Ось jsfiddle, де я НЕ використовую ізольовану область дії, а ng-hide працює нормально, але, звичайно, виклик для підтвердження дії () не працює, і я не знаю, як змусити його працювати.

Зверніть увагу, відповідь, яку я справді шукаю, - це як викликати функції на зовнішній області БЕЗ використання ізольованої області. І я не зацікавлений в тому, щоб це діалогове вікно підтвердження працювало по-іншому, оскільки сенс цього питання полягає в тому, щоб зрозуміти, як здійснювати виклики до зовнішньої області, і при цьому мати можливість, щоб інші директиви працювали проти батьківської області.

Як варіант, мені було б цікаво почути рішення, які використовують ізольований обсяг, якщо інші директиви все ще будуть працювати проти батьківського обсягу , але я не думаю, що це можливо.

Оскільки директива викликає лише функцію (а не намагається встановити значення для властивості), ви можете використовувати $ eval замість $ parse (з неізольованою сферою):

scope.$apply(function() {
    scope.$eval(attrs.confirmAction);
});

Або краще просто використайте $ apply , який $ eval () змінить аргумент проти області:

scope.$apply(attrs.confirmAction);

Скрипка

Ви хочете скористатися послугою $ parse в AngularJS.

Отже, для вашого прикладу:

.directive('confirm', function ($parse) {
    return {
        restrict: 'A',

        // Child scope, not isolated
        scope : true,
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(attrs.confirm)) {
                    scope.$apply(function(){

                        // $parse returns a getter function to be 
                        // executed against an object
                        var fn = $parse(attrs.confirmAction);

                        // In our case, we want to execute the statement in 
                        // confirmAction i.e. 'doIt()' against the scope 
                        // which this directive is bound to, because the 
                        // scope is a child scope, not an isolated scope. 
                        // The prototypical inheritance of scopes will mean 
                        // that it will eventually find a 'doIt' function 
                        // bound against a parent's scope.
                        fn(scope, {$event : e});
                    });
                }
            });
        }
    };
});

Існує думка, пов’язана із встановленням властивості за допомогою $ parse, але я дозволю вам перетнути цей міст, коли ви до нього дійдете.

Явний виклик hideButtonбатьківської області.

Ось скрипка: http://jsfiddle.net/pXej2/5/

І ось оновлений HTML:

<div ng-app="myModule" ng-controller="myController">
    <input ng-model="showIt"></input>
    <button ng-hide="$parent.hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>
</div>

Єдина проблема у мене полягає в тому, як мені викликати метод у батьківській області, якщо я не передаю його в ізольовану область?

Ось jsfiddle, де я НЕ використовую ізольовану область дії, а ng-hide працює нормально, але, звичайно, виклик для підтвердження дії () не працює, і я не знаю, як змусити його працювати.

Спочатку невеликий момент: У цьому випадку сфера зовнішнього контролера не є батьківською сферою сфери дії директиви; область зовнішнього контролера - сферою Директиви. Іншими словами, імена змінних, що використовуються в директиві, будуть шукатися безпосередньо в області дії контролера.

Далі, написання attrs.confirmAction()не працює, оскільки attrs.confirmActionдля цієї кнопки,

<button ... confirm-action="doIt()">Do It</button>

є рядком "doIt()", і ви не можете викликати рядок, наприклад"doIt()"() .

Ваше питання насправді:

Як мені викликати функцію, коли її ім’я є рядком?

У JavaScript ви в основному викликаєте функції, використовуючи крапкові позначення, наприклад:

some_obj.greet()

Але ви також можете використовувати позначення масиву:

some_obj['greet']

Зверніть увагу, як значення індексу є рядком . Отже, у вашій директиві ви можете просто зробити це:

  link: function (scope, element, attrs) {

    element.bind('click', function (e) {

      if (confirm(attrs.confirm)) {
        var func_str = attrs.confirmAction;
        var func_name = func_str.substring(0, func_str.indexOf('(')); // Or func_str.match(/[^(]+/)[0];
        func_name = func_name.trim();

        console.log(func_name); // => doIt
        scope[func_name]();
      }
    });
  }