angularjs - 使用具有属性的对象时从指令中的 ngModel 获取值

Question

不知道如何表达这个问题，所以如果你能想出更好的东西，请编辑。我有以下指令：

app.directive('foo', function() {
    return {        
        restrict: 'A',
        require: "?ngModel",
        link: function (scope, element, attrs, controller) {
            scope.$watch(attrs.ngModel, function () {
                console.log("Changed to " + scope[attrs.ngModel]);
            });
        }
    };
});

当我拥有它时，它工作得很好并且可以正确记录

<input type="text" ng-model="bar" />

app.controller('fooController', function($scope) { 
    $scope.bar = 'ice cream';
});

当我以这种方式尝试时，它不起作用。它不断记录“更改为未定义”

<input type="text" ng-model="model.bar" />

app.controller('fooController', function($scope) { 
    $scope.model = { bar: 'ice cream' };
});

我如何使它适用于这两种情况。看起来是正确的做法，因为角度可以让您同时使用两者。

Answer 1

我查看了 ngModel 指令，发现了一个名为 ngModelGet 的函数。使用 $parse。

app.directive('foo', function($parse) {
    return {        
        restrict: 'A',
        require: "?ngModel",
        link: function (scope, element, attrs, controller) {
            var ngModelGet = $parse(attrs.ngModel);

            scope.$watch(attrs.ngModel, function () {
                console.log("Changed to " + ngModelGet(scope));
            });
        }
    };
});

Answer 2

你可以使用

var ngModelCtrl = controller;
ngModelCtrl.$viewValue

代替

scope[attrs.ngModel]

这是ngModelCtrl sdk