Question

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

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的数据绑定发生之前执行的 - 是否有更好的方法建筑师这不是这样的吗？）。如果手动切换值，则会触发change事件。但它并没有在启动时解雇，所以我不知道如何获得价值。

如何在启动时简单地获取值（通过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

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

1 个答案: