Question

我有以下HTML和JS代码：

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>

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);
    }
});

我将点击事件绑定到我的按钮，并希望在用户点击按钮B时更改$scope.result（类似于按钮A上的ng-click：a（））。但视图不会更新到新的$ scope.result。有人建议我在事件处理程序的底部调用$scope.$apply()。但是当变量将在角度上下文之外时调用$scope.$apply。如何评估按钮“B”上的点击事件是否在角度上下文之外？

Answer 1

element.bind（）是一个不受Angular跟踪的低级（jqLite）调用。因此，您需要通过调用$ scope来帮助Angular知道发生了更改。$ apply（）;在element.bind（）处理程序中。

也许这样做：

element.bind('click', function () {
    scope.$apply(function () {
        scope.b();
    });
});

在角度背景之外？

1 个答案: