scope.$eval 在 angular.js 指令中不起作用

Question

我想构建一个 angular.js 指令，通过单击 <span>，它将变成可编辑的输入。并且下面的代码运行良好，除非模型为空或模型长度为0，使其显示<span> EMPTY </span>。

  <span  ng-editable="updateAccountProfile({'location':profile.location})" ng-editable-model="profile.location"></span> 

app.directive('ngEditable', function() {
    return {
        template: '<span class="editable-wrapper">' + '<span data-ng-hide="edit" data-ng-click="edit=true;value=model;">{{model}}</span>' + '<input type="text" data-ng-model="value" data-ng-blur="edit = false; model = value" data-ng-show="edit" data-ng-enter="model=value;edit=false;"/>' + '</span>',
        scope: {
            model: '=ngEditableModel',
            update: '&ngEditable'
        },
        replace: true,
        link: function(scope, element, attrs) { 

           var value = scope.$eval(attrs.ngEditableModel);
           console.log('value ' , attrs.ngEditableModel , value);
           if (value == undefined || (value != undefined && value.length == 0)) {
             console.log('none');
             var placeHolder = $("<span>");
             placeHolder.html("None");
             placeHolder.addClass("label");
             $(element).attr("title", "Empty value. Click to edit.");
           }


            scope.focus = function() {
                element.find("input").focus();
            };
            scope.$watch('edit', function(isEditable) {
                if (isEditable === false) {
                    scope.update();
                } else {
                    // scope.focus();
                }
            });
        }
    };
});

问题发生在这部分代码

    var value = scope.$eval(attrs.ngEditableModel);
    console.log('value ' , attrs.ngEditableModel , value);

attrs.ngEditableModel 输出内容 'profile.location'，但随后使用 scope.$eval() 只输出 'undefined'，甚至模型 'profile.location' 也不为空

Answer 1

你有两种方法可以解决这个问题。

1) 您在错误的范围内调用 $eval。您在链接功能中有scope 新创建的隔离范围。 attrs.ngEditableModel 确实包含对指令外部范围的引用，这意味着您必须在 scope.$parent 处调用 $eval。

scope.$parent.$eval(attrs.ngEditableModel)

或 2) 更好的处理方式：您已经通过范围定义绑定了 ngEditableModel

scope: {
    model: '=ngEditableModel',

因此，您可以使用指向attrs.ngEditableModel 值的scope.model，而不是使用您自己的$eval 调用。这已经是双向绑定了。