Question

我有以下代码段。

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>CustomForms</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script type="text/ng-template" id="triTemplate">
        <div class="well">
            <div class="btn-group">
                <button class="btn btn-default">Yes</button>
                <button class="btn btn-default">No</button>
                <button class="btn btn-default">Not Sure</button>
            </div>
        </div>
    </script>
    <script>
        angular.module("exampleApp", [])
        .controller("defaultCtrl", function ($scope) {
            $scope.dataValue = "Not Sure";
        })
        .directive("triButton", function () {
            return {
                restrict: "E",
                replace: true,
                require: "ngModel",
                template: document.querySelector("#triTemplate").outerText,
                link: function (scope, element, attrs, ctrl) {
                    element.on("click", function (event) {
                        setSelected(event.target.innerText);
                        scope.$apply(function () {
                            ctrl.$setViewValue(event.target.innerText);
                        });
                    });

                    var setSelected = function (value) {
                        var buttons = element.find("button");
                        buttons.removeClass("btn-primary");
                        for (var i = 0; i < buttons.length; i++) {
                            if (buttons.eq(i).text() == value) {
                                buttons.eq(i).addClass("btn-primary");
                            } 
                        }
                    }

                    ctrl.$render = function () {
                        console.log("render");
                        setSelected(ctrl.$viewValue || "Not Sure");
                    }
                }



            }
        });
    </script>
</head>
<body ng-controller="defaultCtrl">
    <div><tri-button ng-model="dataValue"/></div>
    <div class="well">
            Value:
            <select ng-model="dataValue">
                <option>Yes</option>
                <option>No</option>
                <option>Not Sure</option>
            </select>
    </div>
</body>
</html>

当我更改select选项的值时，然后调用ctrl。$ render，但为什么当我点击按钮时，ctrl。$ render永远不会被调用？

Answer 1

仅当$render与模型具有不同的值时，才会调用

$viewValue。在您的情况下，当调用$setViewValue时，它将首先设置$viewValue，然后将模型设置为相同的值。由于$viewValue首先更新，因此当AngularJS选择模型更改时，$viewValue具有相同的值，因此无法调用$render。

如果要调用$render，请强制它像@SoluableNonagon指出或修改单击处理程序以更改模型而不是调用$setViewValue。这是说明后一种方法的傻瓜：http://plnkr.co/edit/uAqSxsAd49FkXa5Yu5Vs?p=preview。相关的代码是：

var ngModelSet = $parse(attrs.ngModel).assign                    

element.on("click", function (event) {
    setSelected(event.target.innerText);
    scope.$apply(function () {
      ngModelSet(scope, event.target.innerText)
    })
});

Answer 2

强迫它怎么样？为什么不在click事件中调用render函数？

element.on("click", function (event) {
    setSelected(event.target.innerText);
    scope.$apply(function () {
        ctrl.$setViewValue(event.target.innerText);
    });
    ctrl.$render();
});

为什么$ render永远不会被调用

2 个答案: