Подтвердить что ты не робот

Как директивы связывают контроллер?

В этом документе: http://docs.angularjs.org/guide/directive, он говорит, что директивы могут связываться друг с другом контроллерами.

контроллер - функция конструктора контроллера. Контроллер создается до фазы предварительной компоновки и делится с другими директивами, если они запрашивают его по имени (см. Атрибут require). Это позволяет директивам общаться друг с другом и дополнять друг друга.

Я не очень хорошо это понимаю, как они общались с контроллерами? Есть ли какой-нибудь пример или демо?

Ответ 1

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

Хорошим примером этого является создание директивы, которая должна связываться с ng-model. Поскольку ng-model предоставляет контроллер, вы можете потребовать его следующим образом:

myApp.directive('myDirective', function() {
    return {
        require: 'ngModel',
        link: function($scope, elem, attrs, ngModelCtrl) {
            // Here you can listen to different DOM events, and
            // call ngModelCtrl when the model value needs to update
        }
    }
});

И HTML:

<input type="text" ng-model="myModel" my-directive>

Ваша директива может выставить контроллер, выполнив его в объекте, возвращаемом вашей директивной функцией, например:

myApp.directive('myDirective1', function() {
    return {
        link: function($scope, elem, attrs) {

        },
        controller: function() {
            this.sayHello = function() {
                alert("hello!");
            }
        }
    }
});

myApp.directive('myDirective2', function() {
    return {
        require: 'myDirective1',
        link: function($scope, elem, attrs, myDirective1Ctrl) {
            myDirective1Ctrl.sayHello();
        }
    }
});

И HTML:

<input type="text" my-directive2 my-directive1>

Вы также можете потребовать директивный контроллер из родительской директивы, написав require: '^myParentDirective', например:

myApp.directive('myDirective1', function() {
    return {
        link: function($scope, elem, attrs) {

        },
        controller: function() {
            this.sayHello = function() {
                alert("hello!");
            }
        }
    }
});

myApp.directive('myDirective2', function() {
    return {
        require: '^myDirective1',
        link: function($scope, elem, attrs, myDirective1Ctrl) {
            myDirective1Ctrl.sayHello();
        }
    }
});

И HTML:

<div my-directive1>
    <div my-directive2></div>
</div>