Вызов функции из директивы без изолированной области видимости

Question

Вызов функции из директивы без изолированной области видимости

0

Я прочитал этот пост. Однако в этом примере он вызывает функцию контроллера после прослушивания события щелчка элемента.

Как я могу вызвать вызов функции контроллера при нажатии дочерних элементов элемента директивы?

    <div ng-controller="MyCtrl">
    <abc method1="outerMethod('c')" method2="outerMethod2('g')"></abc>
</div>

Директива:

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

myApp.directive('abc', function() {
    return {
        restrict: "EA",
        replace: true,
        template: "<div><p ng-click='clickedP()'>p</p><div ng-click='clickedDiv()'>div</div></div>",
        controller: function($scope) {
            // how can I call outerMethod if clickedP is executed???
            // how can I call outerMethod2 if clickedDiv is executed???
        },
        controllerAs: "vm",
        link: function(scope, element, attrs, vm) {

        }
    }
});


function MyCtrl($scope) {
    $scope.outerMethod = function( a ) {
        alert( "you did it" );
    }
        $scope.outerMethod2 = function( a ) {
        alert( "you did it again" );
    }
}

Сценарий: http://jsfiddle.net/j93ba7a2/5/

Shlomo 07 июль 2015, в 17:04

Источник

Теги:

angularjs

angularjs-scope

angularjs-directive

1 ответ

Ещё вопросы

Shlomo · Accepted Answer · 2015-07-07T20-54-00.000Z

Область может использоваться напрямую без прохождения атрибутов. Кроме того, использование "controllerAs" в директиве с тем же значением, что и родительский контроллер, является плохой идеей, поскольку она перезапишет ее.

Решение:

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

myApp.directive('abc', function () {
    return {
        restrict: "EA",
        replace: true,
        template: "<div><p ng-click='clickedP()'>p</p><div ng-click='clickedDiv()'>div</div></div>",
        controller: function ($scope) {

            // how can I call outerMethod if clickedP is executed???
            $scope.clickedP = function () {
                $scope.outerMethod(); // you just call it!
            }
            // how can I call outerMethod2 if clickedDiv is executed???
            $scope.clickedDiv = function () {
                $scope.outerMethod2(); //Same way!
            }

        },
        controllerAs: "vm",
        link: function (scope, element, attrs, vm) {

            /* It would have been better to handle clickedP and 
               clickedDiv here instead of in the controller, but I'm 
               trying to avoid confusion by changing as little as 
               possible of your code. */

        }
    }
});

function MyCtrl($scope) {
    $scope.outerMethod = function (a) {
        alert("you did it");
    }
    $scope.outerMethod2 = function (a) {
        alert("you did it again");
    }