Question

我有一个非常简单的脚本，包含角度js

 <script>
        var delightApp = angular.module('delightmeter', []);
        delightApp.controller('delightController', function ($scope) {

            $scope.delightScore = 0;
            $scope.test = function () {
                if (isNaN($scope.delightScore)) {

                    // do not bind if this happens
                }
            }

        });
    </script>

上述脚本的html是

<div id="angularapp" data-ng-app="delightmeter" data-ng-controller="delightController">
    <input id="Text1" type="text" data-ng-model="delightScore" />
        {{delightScore}}

        <input id="Button1" type="button" value="button" data-ng-click="test()"/>
    </div>

正如我们所知，在角度双向绑定发生的任何可能是$scope.delightScore中的值被绑定到html页面。有没有办法阻止这种绑定的发生？

Answer 1

不是直接绑定到变量，而是绑定到执行检查的函数

<div id="angularapp" data-ng-app="delightmeter" data-ng-controller="delightController">
<input id="Text1" type="text" data-ng-model="delightScore" />
    {{ValideDelightScore()}}

    <input id="Button1" type="button" value="button" data-ng-click="test()"/>
</div>

在你的控制器中定义：

    $scope.ValideDelightScore = function () {
            if (isNaN($scope.delightScore)) {
                return "";
            }else{
               return $scope.delightScore
            }
        }

Answer 2

没有办法这样做，因为你明确地绑定了两个范围中的model。即使你可以，你也不应该搞乱Angular的生命周期，否则你将会度过一段美好的时光。

实现您所需要的正确方法是，或者使用@Shivas Jayaram提供的解决方案，或者在您不希望显示model if isNaN的情况下使用过滤器。

angular.module('myApp.filters', [])
.filter('NaNFilter', function($moment, $translate) {
  return function(value) {
    if(isNaN(val)) {
      return '';
    }
    return value;
  };
});

在你的模板中：

<div id="angularapp" data-ng-app="delightmeter" data-ng-controller="delightController">
    <div>Show delightScore if !NaN: {{delightScore | NaNFilter}}</div>
    <input id="Text1" type="text" data-ng-model="delightScore" />
        {{delightScore}}

        <input id="Button1" type="button" value="button" data-ng-click="test()"/>
    </div>

Angular JS：如何阻止双向绑定发生

2 个答案: