ng-如果不使用简单的javascript

时间:2017-03-31 13:42:23

标签: javascript angularjs angularjs-ng-if

当我通过简单的javascript函数更改值时,

ng-if不起作用。我的函数被调用但是在视图中看不到值的变化。请参考以下代码。

HTML

<div id="span" ng-app='MyModule' ng-cloak ng-controller="MyController">

<div ng-if="!bool">
  This is for true
</div>
<div ng-if="bool">
  This is False
</div>
{{bool}}
<br>
<input type="submit" ng-click = "myfunction('test')" value="ng-if button">
</div>
<input type="submit" onClick = "check1()" value="simple JS button">

JS

angular.module('MyModule', [])
.controller('MyController', function ($scope) {
$scope.bool = true;
$scope.myfunction = function (data) {
    $scope.bool = !$scope.bool;
};
});
function check1() {
    angular.element(document.getElementById('span')).scope().myfunction('test');
}

当我使用ng-click button时,它会更改bool更改的值,但simple JS button不会发生同样的情况。实际上我在已经使用jQuery的页面中实现Angular,所以我需要使用simple JS button

JS Fiddle JS Fiddle

2 个答案:

答案 0 :(得分:1)

首先,ng-click能够解析角度表达式。

其次,它处理对当前范围的引用,并执行对$scope.$apply的调用,以通知任何观察者更新。如果您要在函数中添加对angular.element(document.getElementById('span')).scope().$apply()的调用,它应该按预期工作。

答案 1 :(得分:0)

使用$ scope.apply。这是因为angulars摘要周期不会像在简单的JS函数中那样知道你的值是否在其范围之外变化。