javascript - 如何访问指令中的属性值？

Question

我正在尝试将模型绑定到指令中的属性。

Javascript——

function Main($scope) {
    $scope.text = "abc"
};

angular.module("myApp", [])
.directive("load", function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        link: function (scope, element, attrs) {
           console.log(attrs);
           element.html(someFunction(attrs.text));
        }
    };
});

HTML --

<div ng-controller="Main">
    <load text="Hello {{text}}"></load>
</div>

你可以在这里找到 jsFiddle 。在小提琴中我已经取消了someFunction.

Answer 1

这是一个快速的 plunk，显示了从指令中获取范围的 5 种不同方法。最后一个是你想要的：http: //plnkr.co/edit/e2mMAq

Answer 2

根据我认为您正在尝试做的事情，您需要进行两项修改：

1. 您已将替换设置为 true，因此您可能应该在代码中添加一个模板，以用新标记替换元素。

2. 在链接阶段发生时，尚未对插值进行评估，因此您需要观察属性以寻找变化。

     angular.module('myApp', [])
         .directive('load', function($compile) {
             return {
                 restrict: 'E',
                 replace: true,
                 link: function (scope, element, attrs) {
                     console.log(attrs);
                     element.html(attrs.text);
   
                     attrs.$observe('text', function(value) {
                         console.log('new value = ' + value);
                         element.html(value);
                     });
                 }
   
             };
         });
   

请查看观察插值属性的部分以了解更多详细信息。