将 scope.$watch 值返回给指令的链接函数答案

【问题标题】：returning scope.$watch value to a link function of a directive将 scope.$watch 值返回给指令的链接函数
【发布时间】：2015-04-19 01:03:17
【问题描述】：

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

我可以将tmpl 变量的字符串附加到元素上就好了，但我scope.$watching scope.value 是由用户的ng-model 输入定义的，它没有附加.

需要明确的是，我希望通过链接函数中的scope.$watch 将ng-modeled 值附加到指令中——但是，return tmpl += oldValue; 似乎没有将自身附加到@987654330 @ 多变的。

我做错了什么？

非常感谢。

<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'未定义？

【问题讨论】：

你为什么不直接使用template:'Please ...{{scoped.value}} <br><br>End..."？不是 100% 清楚你在寻找什么行为
我想这样做，但我试图这样做是为了设置一些 css 属性，并且表达式在样式标签中不起作用。不过谢谢^_^。也很高兴知道为什么这不起作用。
@nikkwong 你知道 ng-style 和 ng-class 吗？
@shaunhusain，是的——但这只能用于将样式附加到元素的属性上——我想用它来创建一个完整的样式表，或者其他东西 :-)跨度>

标签： javascript angularjs angularjs-directive

【解决方案1】：

您遇到的问题是您的 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】：

这是否符合您的要求？

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);
        }
    };
});

【讨论】：

对不起，我认为 oldvalue newvalue 措辞有点混乱。我对其进行了更新以仅反映新值，这是我想要附加到 tmpl 变量的内容。谢谢:-)