Question

基本上，我如何从指令中听取表达式的变化？

我正在使用未记录的ng-required来有条件地要求某个字段：

<input type="checkbox" ng-model="partner" checked />
<input ng-model="partnerName" placeholder="required" ng-required="partner" />

效果很好（here's the Plunkr）。唯一的问题是它保留placeholder“必需”文本，无论它是否真正需要。

所以，我决定创建自己的指令。这是它应该如何工作：

<input ng-placeholder="{ 'required': partner }" />

这个想法类似于angular ng-class，但我无法完成这个任务。这是我到目前为止所得到的：

app.directive('ngPlaceholder', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            console.log( scope.$eval(attrs.ngPlaceholder) );
        }
    }
});

记录了一个可以用来确定placeholder值的好对象：

{ required: true }

但是，如果$digest发生更改，我该如何挂钩$apply / placeholder周期更新partner属性？

Answer 1

这是你想要的吗？ plunker

链接功能的基本思路应该是

   link: function (scope, element, attrs) {
        scope.$watch(attrs.xngPlaceholder, function (newVal, oldVal, scope) {
          element.removeAttr('placeholder');
          var att = '';
           angular.forEach(newVal, function (elm, key)
                att += elm ? (key + ' ') : ''; 
            });
            element.attr('placeholder', att);
        }, true);
    }

Answer 2

另一种方法，不需要指令：

placeholder="{{{true: 'required', false:''}[partner]}}"

上面创建了对象{true: 'required', false:''}，然后使用当前值partner索引到对象中。

观察指令中的表达式

2 个答案: