Javascript AngularJS指令：更改$scope未反映在UI中_Javascript_Angularjs

Javascript AngularJS指令：更改$scope未反映在UI中

javascript angularjs

Javascript AngularJS指令：更改$scope未反映在UI中,javascript,angularjs,Javascript,Angularjs,我试图用AngularJS创建一些自定义元素，并将一些事件绑定到它，然后我注意到$scope.var在绑定函数中使用时不会更新UI 下面是一个描述问题的简化示例： HTML: 演示：基本上，我将click事件绑定到my按钮，并希望在用户单击按钮B时更改$scope.result（类似于按钮a上的ng click:a（））。但是如果我这样做，视图将不会更新到新的$scope.result 我做错了什么？谢谢。事件处理程序被称为“外部”Angular，因此尽管将更新您的$scope属性，但视图不会

我试图用AngularJS创建一些自定义元素，并将一些事件绑定到它，然后我注意到$scope.var在绑定函数中使用时不会更新UI

下面是一个描述问题的简化示例：

HTML:

演示：

基本上，我将

click

事件绑定到

my按钮

，并希望在用户单击按钮B时更改

$scope.result

（类似于按钮a上的

ng click:a（）

）。但是如果我这样做，视图将不会更新到新的

$scope.result

我做错了什么？谢谢。

事件处理程序被称为“外部”Angular，因此尽管将更新您的

$scope

属性，但视图不会更新，因为Angular不知道这些更改

调用事件处理程序底部的

$scope.$apply（）

。这将导致运行，Angular将注意到您对

$scope

所做的更改（由于在HTML中使用

{…}

而设置的

$watchs

），并更新视图。

这也可能是不同问题的结果，但症状相同

如果销毁分配给视图的父范围，则即使在调用

$apply（）

之后，其更改也不会以任何方式影响视图。请参阅-您可以通过文本输入更改视图值，但当您单击“销毁父范围”时！，模型不再更新

我不认为这是一个错误。这是由于应用程序中的代码太粗糙所致：-）

我在使用时遇到了这个问题。我试图用第一个模态的范围打开第二个模态。然后，我立即关闭了导致父作用域被销毁的第一个模式。

使用超时

$timeout（函数（）{ 代码。。。。 },

0);

@ogc nick，如果您已经处于摘要周期中，则不必调用

$apply（）

。如果您的视图未更新，则与OP示例不同。我已获得$digest，并且我的视图仅在更新我的作用域后几秒钟作出响应@Jorre，听起来你可能有太多的绑定：对于那些仍然疑惑的人，你可以使用Angular的$timeout（）函数@MarkRajcok Abit off解决“$apply ready in progress”问题，但与范围相关-你的绘图是什么？（有rootscope的父亲吗？）我在IE9中遇到了一个问题，我使用了

ng if

，它破坏了范围。因此，当我从项目列表中选择一个项目并根据项目类型填充属性时，我要确保所选项目类型中不存在属性的任何冗余作用域。但是在IE9中，范围的破坏意味着我看到了奇怪的行为，视图引用

{}

没有被呈现，下拉列表只显示文本的第一个字母。我用

ng show

替换了

ng if

，一切正常。这个答案让我找到了答案，所以如果我的问题得到了解决，那就感谢你是ng show而不是ng

<!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>

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