如何通过 ng-model 通知我角度设置输入字段的值？

Question

见this fiddle。

我有一个简单的指令，我只记录它添加到的复选框的值：

myApp.directive('myCheckBox', function () {
    return function (scope, element, attrs) {
        console.log('directive linking function, checked = ', element[0].checked);

        // not triggered on startup
        element.bind('change', function (event) {
            console.log('onChange, checked = ', element[0].checked);
        });

    }
});

此复选框的值绑定到封闭控制器中的属性：

<div ng-app="myApp">
    <div ng-controller="myController">Boolean1:
        <input my-check-box type="checkbox" ng-model="settings.boolean1" />
    </div>
</div>

像这样：

myApp.controller('myController', ['$scope', function ($scope) {
    $scope.settings = {
        boolean1: true
    }
}]);

问题是我找不到（在指令中）找出“初始”值（即控制器设置的值）是什么的方法。

如果您查看控制台，您会看到初始日志语句将其报告为 false（我不确定为什么，但我想这是在 Angular 的数据绑定发生之前执行的 - 有没有更好的方法来建筑师这个所以不是这样吗？）。如果您手动切换该值，则会触发更改事件。但它并没有在启动时触发，所以我不知道如何获得价值。

如何在启动时简单地获取值（通过 ng-model 设置），或者如何监听该更改？

Answer 1

您需要做的是$watch 附加到元素的ngModel。观察变量时，可以看到旧值和新值。

myApp.directive('myCheckBox', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            console.log('directive linking function, checked = ', element[0].checked);

            scope.$watch(function () {
                return ngModel.$modelValue;
            }, function (newValue, oldValue) {
                console.log(newValue, oldValue);
            });
        }
    };
});

JSFFIDLE