У меня есть контроллер:

function myController($scope) {
    $scope.clicked = false;
}

И директива:

function myDirective() {
    return {
        restrict: 'E',

        link: function(scope, elem, attrs) {

            elem.bind('click', function() {
                // need to update controller $scope.clicked value
            });
        },

        template: '<div>click me</div>'; 
        replace: true;
    }
}

И я использую это так:

<div ng-controller="myController">
    <my-directive></my-directive>
</div>

Как я могу изменить значение контроллера $ scope.clicked? Спасибо!

1
handsome 19 Дек 2015 в 01:18

3 ответа

Лучший ответ

Поскольку вы не используете изолированную область в своей директиве, вы можете использовать scope.$parent.clicked для доступа к свойству родительской области.

link: function(scope, elem, attrs) {
            elem.bind('click', function() {
                scope.$parent.clicked = ...
            });
        },
2
Hamlet Hakobyan 18 Дек 2015 в 22:22

Мне нравится использовать $ scope. $ Emit для таких целей. Это позволяет отправлять данные из директивы в контроллер. Вы должны создать собственный слушатель в вашем контроллере:

$scope.$on('cliked-from-directive', function(event, data){
        console.log(data)
})

Как видите, теперь у вас есть полный доступ к области действия вашего контроллера, и вы можете делать все, что захотите. И в вашей директиве просто использовать scope.$emit link: function (scope, elem, attrs) {

        elem.bind('click', function() {
          scope.$emit('cliked-from-directive', {a:10}) 
        });

Здесь я создал для вас jsfiddle

1
TetianaDev 20 Дек 2015 в 22:57

Я бы не рекомендовал использовать scope.$parent для обновления или доступа к значениям родительской области, вы можете two way bind переменную контроллера, которую необходимо обновить в вашей директиве, поэтому ваша директива становится:

function myDirective() {
    return {
        restrict: 'E',
        scope: {
         clicked: '='
        },
        link: function(scope, elem, attrs) {

            elem.bind('click', function() {
                // need to update controller $scope.clicked value
                $scope.clicked = !$scope.clicked;
            });
        },

        template: '<div>click me</div>'; 
        replace: true;
    }
}

Теперь передайте это clicked от родителя:

<div ng-controller="myController as parentVm">
    <my-directive clicked="parentVm.clicked"></my-directive>
</div>

function myController() {
    var parentVm = this;
    parentVm.clicked = false;
}

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

1
Kashyap Mukkamala 18 Дек 2015 в 22:28