Question

我正在使用一个自定义指令，它试图通过链接函数将一些HTML附加到其元素。

我可以将tmpl变量的字符串附加到元素上，但我scope.$watch scope.value由ng-model输入定义来自用户，而且它没有附加。

为了清楚起见，我希望通过链接功能中的ng-model将scope.$watch ed值附加到指令中 - 但是，return tmpl += oldValue;似乎不是将自己附加到tmpl变量。

我做错了什么？

非常感谢。

<html ng-app="app">

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
  <input ng-model="scoped.value">
    {{scoped.value}}
    <br><br>
    <artboard></artboard>
  </body>

</html>

应用程序：

angular.module('app', [])

.directive("artboard", function(){
    return {
        restrict: 'E',
        link: function (scope, element) {

            var tmpl = "Please append newValue here:";

            scope.$watch("scoped.value", function(newValue){
                return tmpl += newValue;
            });

            tmpl += "\<br\>\<br\>\<br\>" + "End appendage";

            element.append(tmpl);
        }
    };
});

Plnkr：http://plnkr.co/edit/SV5jxsc7DhB9hH9Pob7r?p=preview

编辑：我更新了Plnkr，它显示了我想要做的更好一点：

http://plnkr.co/edit/SV5jxsc7DhB9hH9Pob7r?p=preview

为什么'hi'未定义？

Answer 1

这会做你想要的吗？

http://plnkr.co/edit/rORuEK7kL8v3Feya8up2?p=preview

angular.module('app', [])

.directive("artboard", function(){
    return {
        restrict: 'E',
        link: function (scope, element) {

            var tmpl = "Please append oldValue here:";
            var end = "\<br\>\<br\>\<br\>" + "End appendage";

            scope.$watch("scoped.value", function(newValue, oldValue){
              while(element[0].firstChild){
                element[0].removeChild(element[0].firstChild)
              }
              element.append(tmpl+newValue+end)
            });


            element.append(tmpl+end);
        }
    };
});

Answer 2

您遇到的问题是scope.$watch确实更改了tmpl，但没有对其进行任何操作。

如果你重新组织你的代码看起来像这样，它会做同样的事情：

        var tmpl = "Please append newValue here:";
        tmpl += "\<br\>\<br\>\<br\>" + "End appendage";
        element.append(tmpl);

        scope.$watch("scoped.value", function(newValue){
            return tmpl += newValue;
        });

仅在链接指令时才调用附加元素tmpl的代码行。

即使你的$watch函数确实对tmpl做了一些事情，看着scope.value会在值发生变化的时候触发回调。因此，输入hello会使tmpl h，he，hel，hell和hello附加到其中

返回范围。$监视指令的链接函数的值

2 个答案: