javascript - Angular js在指令的主要流程中访问 `ctrl.$modelView`

Question

更新了三种有效的方法，以及原来的一种无效的方法

我做了一个 Angular js 指令，我正在尝试访问 ctrl.$modelValue。它在主流中不起作用。

我有三种可能的解决方案，它们都有缺点。

方法 1 没有像我希望的那样工作，而且我在指令中找不到可以通过这种方式直接访问的任何其他可用属性。

方法2之所以可行，是因为它会等到当前流程完成，然后在下一时刻执行。这恰好是在 angular js 生命周期完成之后，此时 Controller 似乎已连接到模型。这对我来说似乎并不理想，因为它正在等待所有执行完成。如果可能的话，我更愿意在 Controller 链接到模型后立即运行我的代码，而不是在当前流程中的所有代码完成之后。

方法 3 效果很好，从 $scope 访问模型，并根据 attrs 上访问的字符串表示确定模型是什么> 对象。缺点是此方法使用 eval 来获取寻址值 - 众所周知，eval 是邪恶的。

方法 4 可行，但它似乎是一种访问简单属性的过于复杂的方法。我不敢相信没有比字符串操作和 while 循环更简单的方法了。我不确定访问属性的函数是否 100% 可靠。至少我可能想将其更改为使用 for 循环。

我应该使用哪种方法，或者有没有没有缺点的第五种方法？

演示:http://jsfiddle.net/billymoon/VE9dX/9/

HTML:

<div ng-app="myApp">
    <div ng-controller="inControl">
        I like to drink {{drink.type}}<br>
        <input my-dir ng-model="drink.type"></input>
    </div>
</div>

Javascript:

var app = angular.module('myApp', []);

app.controller('inControl', function($scope) {
    $scope.drink = {type:'water'};
});

app.directive('myDir', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, element, attrs, ctrl) {

            // Method 1
            // logs NaN
            console.log({"method-1": ctrl.$modelValue});

            // Method 2
            // on next tick it is ok
            setTimeout(function(){
                console.log({"method-2": ctrl.$modelValue});
            },0);

            // Method 3
            // using eval to access model on scope is ok
            // eval is necessary in case model is chained
            // like `drink.type`
            console.log({"method-3": eval("$scope."+attrs.ngModel)});

            // Method 4
            // using complex loop to access model on scope
            // which does same thing as eval method, without eval
            var getProperty = function(obj, prop) {
                var parts = prop.split('.'),
                    last = parts.pop(),
                    l = parts.length,
                    i = 1,
                    current = parts[0];
                while((obj = obj[current]) && i < l) {
                    current = parts[i];
                    i++;
                }
                if(obj) {
                    return obj[last];
                }
            }
            console.log({"method-4": getProperty($scope,attrs.ngModel)});

        }
    };
});

Answer 1

有很多选择，根据您的要求，有些比其他选择更好，例如如果 View 值或模型值发生变化，您是否应该收到通知，或者您对初始值是否满意。

只是为了知道初始值，您可以使用以下任一方法:

console.log('$eval' + $scope.$eval(attrs.ngModel));

console.log('$parse' + $parse(attrs.ngModel)($scope));

$eval 和 $parse 的最终结果是相同的，但是 $eval 位于 $scope 之外，其中 $parse 是一个将表达式转换为函数的 Angular 服务。然后可以调用返回的 $parse 函数并传递上下文(通常是作用域)以检索表达式的值。此外，如果表达式是可赋值的，则返回的 $parse 函数将具有 assign 属性。 assign 属性是一个函数，可用于在给定的上下文中更改表达式的值。参见 $parse docs .

如果您需要在模型值更改时得到通知，您可以使用 $watch，但是在处理 ngModel 时有更好的方法。如果您需要在模型本身发生更改时跟踪模型值的更改，即在您的代码中，您可以使用 modelCtrl.$formatters:

    ctrl.$formatters.push(function(value){
        console.log('Formatter ' + value);
    });

请注意，$formatters 仅在代码中的模型值更改时调用，而不是在用户输入更改模型时调用。您还可以使用 $formatters 来更改模型 View 值，例如在不更改基础模型值的情况下将显示文本转换为大写。

当您需要获知用户输入发生的模型值更改时，您可以使用 modelCtrl.$parsers 或 modelCtrl.$viewChangeListeners。每当用户输入更改基础模型值时调用它们:

    ctrl.$viewChangeListeners.push(function(){
        console.log('$viewChangeListener ' + ctrl.$modelValue, arguments);
    });

    ctrl.$parsers.push(function(value){
        console.log('$parsers ' + value, arguments);
        return value;
    });

$parsers 允许您在需要时将值从用户输入更改为模型，其中 $viewChangeListeners 只是让您知道输入值何时更改。

综上所述，如果你只需要初始值，使用$eval或$parse，如果你需要知道什么时候值改变，你需要组合$formatters 和 $parsers/$viewChangeListeners。

以下fiddle根据您的原始 fiddle 显示所有这些和更多选项: http://jsfiddle.net/VE9dX/6/