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

Question

I am trying to bind a model to an attribute in a directive.

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>

You can find the jsFiddle here . In the fiddle I have done away with someFunction .

Answer 1

Here is a quick plunk showing 5 different ways to get to scope from within a directive. The last one is the one you want: http://plnkr.co/edit/e2mMAq

Answer 2

Based on what I believe you are trying to do, you need to make two modifications:

1. You have replace set to true, so you should probably add a template to your code to replace the element with your new markup.

2. At the time that the linking phase occurs, the interpolation has not been evaluated yet, so you need to observe the attribute in order to look for changes.

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

Take a look at the section observing interpolated attributes for more details.