观察者对元素属性的更改，以更改元素内部的html

Question

div的内容已填充为sk-placeholder属性的内容。 我有一个if语句，该语句将根据特定的文本或空字符串填充div的内容，具体取决于boolean viewer.building。

<div contentEditable="[[viewer.building]]" class="course-description"
ng-model="viewer.course.description" sk-replace
sk-placeholder="[[viewer.building && 'Summarise the content of your course
by  writing a short blurb. You can add a more elaborate description on
the next  page.' || '']]"></div>

当占位符内容更改时，需要触发一个事件以清空div的内容。 我做了一个叫做sk-replace的新指令，应该这样做。 但是该事件并未触发。

SEK.app.directive("skReplace", function ()
{
    return {
        restrict:'AEC',
        link: function(scope, elem, attrs) {
             scope.$watch(attrs.skPlaceholder.value, function(v) {
                v = attrs.skPlaceholder;
                if(v.length < 1){
                    elem.html('');
                };
            });
        }
    }
});

该功能在页面加载时执行。 但当占位符的内容更改时，则不会。 （这是通过按钮顺便完成）

有什么帮助吗？

Answer 1

您应该改用$ observe ：

attrs.$observe('skPlaceholder', function (value) {
  if (value.length < 1) {
    elem.html('');
  };
});

Answer 2

$watch它可以是一个函数或字符串作为第一个参数，所以你有两个选择（三级如果你用observe来代替）。 选项一（绑定到范围）：

scope.val = attrs.skPalceholder.value;    
scope.$watch('val', function(v) {
  if(v.length < 1) {
    elem.html('');
  };
});

选项二（从函数返回值）

scope.$watch(function() {
  return attrs.skPlaceholder.value;
}, function(v) { 
  if(v.length < 1){
    elem.html('');
  };
});

编辑-我看到observe被另一个答案覆盖了，它可能比观察者解决方案更优雅。 由你决定。