Как обновить переменную области видимости контроллеров из дочерней директивы?

Question

Как обновить переменную области видимости контроллеров из дочерней директивы?

0

У меня возникли проблемы с обновлением переменной в моей переменной $scope из-за привязки директивы к этим переменным. Например, я пытаюсь обновить значение с помощью функции setter при каждом перемещении мыши, но значение никогда не обновляется.

Я сделал скрипку здесь: http://jsfiddle.net/23hdsueb/

Любые идеи о том, как установить переменные в родительской области из моей директивы?

HTML:

<body ng-app="testApp" ng-controller="TestController">
    <p>
        outside directive
    </p>
    <input type="text" name="name" ng-model="obj.value">
    <p>
        value: {{obj.value}}
    </p>
    <test value="obj.value" set-value="setValue"></test>
</body>

JS:

angular.module('testApp', [])

.controller('TestController', ['$scope', function ($scope) {
    $scope.obj = {
        value: 'initial value'
    };
    $scope.setValue = function (val) {
        $scope.obj.value = val;
    };
}])

.directive('test', ['$document', function ($document) {
    return {
        restrict: 'E',
        scope: {
            value: '=',
            setValue: '='
        },
        template: '<div class="test">inside directive<br>value: {{value}}</div>',
        link: function (scope, element, attrs) {
            $document.on('mousemove', function (event) {
                scope.setValue(event.pageX + ' : ' + event.pageY);
            });
        }
    };
}]);

ArslanW 31 окт. 2015, в 18:57

Источник

0

Вы вызываете function по атрибуту директивы неправильно: в вашем DDO должна быть scope: {setValue: "&"} Пожалуйста, обратитесь: stackoverflow.com/questions/33454526/…
Kulbhushan Singh 31 окт. 2015, в 18:03

Теги:

angularjs

angularjs-scope

angularjs-directive

2 ответа

0

То, что вам не хватает, синтаксис для вызова функции контроллера через директиву/или/Как вызвать метод в атрибуте директивы: TL: DR вы можете пройти через красивое объяснение об этом Дэн Вахлин

В вашей директиве:

.directive('test', ['$document', function ($document) {
    return {
        restrict: 'E',
        scope: {
            value: '=',
            setValue: '&'//for function it should be &
        },
        template: '<div class="test">inside directive<br>value: {{value}}</div>',
        link: function (scope, element, attrs) {
            $document.on('mousemove', function (event) {
                //argVal should be exact name in the function call mentioned in directive attribute
                scope.setValue({argVal: event.pageX + ' : ' + event.pageY});
            });
        }
    };
}]);

И ваше использование директивы должно быть, как: Пожалуйста, обратите внимание: argVal должны точно совпадать, как в вызове функции внутри связи function вызова

<test value="obj.value" set-value="setValue(argVal)"></test>

Для получения подробной информации см. Вопрос:

Kulbhushan Singh 31 окт. 2015, в 15:14

Ещё вопросы

Вы вызываете function по атрибуту директивы неправильно: в вашем DDO должна быть scope: {setValue: "&"} Пожалуйста, обратитесь: stackoverflow.com/questions/33454526/…

ArslanW · Accepted Answer · 2015-10-31T15-25-00.000Z

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

$document.on('mousemove', function (event) {
  scope.setValue(event.pageX + ' : ' + event.pageY);
  scope.$apply();
});

Хотя $ document - угловая переменная, $ document.on на самом деле не является угловым способом привязки обработчиков событий к событиям.

Почему хорошо следовать угловатым образом? Потому что они автоматически запускают область. $ Apply(), когда команда завершается. Функция apply() запускает цикл дайджеста, который отвечает за угловые полномочия. Цикл дайджеста среди многих вещей проверяет, есть ли связанные переменные, которые необходимо обновить или нет.

Если вы используете ng-mousemove, вам не понадобится область действия. $ Apply(), потому что директива ng-mousemove запускает цикл дайджеста при его запуске.

Спасибо за объяснение! Когда я получу респ. Я буду голосовать за этот ответ.
Хорошее объяснение, спасибо, чувак.