Директивы AngularJS: изменение $ scope не отражается в пользовательском интерфейсе

Question

Директивы AngularJS: изменение $ scope не отражается в пользовательском интерфейсе

Я пытаюсь сделать некоторые пользовательские элементы с AngularJS и привязать к нему некоторые события, тогда я замечаю $scope.var не будет обновлять пользовательский интерфейс при использовании в функции привязки.

вот упрощенный пример, описывающий проблему:

HTML:

<!doctype html>

<html ng-app="test">

  <head>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

    <script src="script.js"></script>



  </head>

  <body>



<div ng-controller="Ctrl2">

  <span>{{result}}</span>

  <br />

  <button ng-click="a()">A</button>

  <button my-button>B</button>



</div>





  </body>

</html>

JS:

function Ctrl2($scope) {

    $scope.result = 'Click Button to change this string';

    $scope.a = function (e) {

        $scope.result = 'A';

    }

    $scope.b = function (e) {

        $scope.result = 'B';

    }

}



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



mod.directive('myButton', function () {

    return function (scope, element, attrs) {

        //change scope.result from here works

        //But not in bind functions

        //scope.result = 'B';

        element.bind('click', scope.b);

    }

});

демо : http://plnkr.co/edit/g3S56xez6Q90mjbFogkL?p=preview

в основном, я связываю click событие my-button и хочу изменить $scope.result когда пользователь нажал кнопку B (аналогично ng-click:a() на кнопке A). Но вид не будет обновляться до Нового $scope.result если я так поступлю.

что я сделал не так? Спасибо.

440 3

javascript angularjs

3 ответов:

Comments

Ничего не найдено.

Mark Rajcok · Accepted Answer · 2014-07-14 02:23:34

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

вызов $scope.$apply() в нижней части обработчика событий. Это вызовет дайджест для запуска, и угловой заметит изменения, внесенные в $scope (поскольку $watches эта угловая настройка из-за использования {{ ... }} в вашем HTML) и обновите представление.

fracz · Accepted Answer · 2015-07-31 17:02:43

Это может быть также следствием различных проблем, но с теми же симптомами.

Если вы уничтожите родительскую область той, которая назначена представлению, ее изменения никак не повлияют на представление даже после $apply() звонок. Смотрите пример - вы можете изменить значение представления с помощью ввода текста, но при нажатии кнопки уничтожить родительской!, модель больше не обновляется.

Я не считаю это ошибкой. Это скорее результат слишком хаки код в приложении: -)

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

Muhammad Bilal · Accepted Answer · 2017-09-13 10:58:34

использовать тайм-аут

$timeout(функция () { код.... }, 0);