лучшая практика двухсторонней привязки угловых функций

Мое требование - вызвать дочернюю директивную функцию из родительской директивы. В настоящее время мы внедрили шаблон публикации-подписки. Дочерняя директива подписывается на какое-то событие, и мы создаем триггер для родительской директивы. публикация подписки реализована через $.callbacks

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

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

Есть еще один способ реализовать это, используя двустороннюю привязку функций.

directives.directive('twoWayBind', function () {
    return {
        restrict: "E",
        transclude: true,
        templateUrl: 'app/twoWayBindFunction.html',
        scope: {
            twoWayBinding: '='
        },
        controller: 'twoWayBindFunctionController',
        bindAsController: true,
        controllerAs: 'vm',
        link: function (scope, element, attrs, controller) {
        }
    };
});


controllers.controller('twoWayBindFunctionController', ['$scope', function (scope) {
    var vm = this;
    vm.scope = scope;

    scope.twoWayBinding = function () {
        console.log('twoway bind');
    }    
}]);

мы можем вызвать функцию twoWayBinding из родительской области.

Я хотел бы понять, что является лучшей практикой.


angularjs angularjs-directive
person Vikas    schedule 14.07.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я обнаружил, что лучший способ для меня - передать объект из родительской директивы дочернему. Добавление функций в дочернюю директиву к этому объекту и вызов его из родителя.

app.directive('parent', function() {
    return {
        restrict: 'E',
        scope: {
            buttonCaption: '@'
        },
        bindToController : true,
        controllerAs : 'vm',
        template: "<button ng-click='vm.twoWayObject.childFunc()'>{{vm.buttonCaption}}</button><child two-way-obj='vm.twoWayObject'></child>",
        controller: function($scope) {  
            var vm = this;      
            vm.twoWayObject = {};
        },

        link: function() {             
        }   
    }
});

app.directive('child', function() {
    return {
        restrict: 'E',
        scope: {
            twoWayObj: '='
        },
        bindToController : true,
        controllerAs : 'vm',
        template: "<h1>Chuchi</h1>",             
        link: function() {             
        },
        controller: function($scope){
            var vm = this;
            vm.twoWayObj.childFunc = function(){
                alert('child function called');
            }
        }
    }
});

Добавьте Fiddle с примером.

Посмотрите на этот вопрос (первый ответ):

Как вызвать метод, определенный в директиве AngularJS?

person e.s    schedule 16.07.2016