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输出内容＆＃39; profile.location＆＃39;，然后使用范围。$ eval（）仅输出＆＃39; undefined＆＃39;，甚至模型＆＃39; profile.location＆＃39;不为空

Answer 1

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

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

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

或2）处理它的更好方法：您已经通过范围定义

绑定了ngEditableModel

scope: {
    model: '=ngEditableModel',

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

范围。$ eval在angular.js指令中不起作用

1 个答案: