Question

请帮帮我，我们如何让AngularJS编译指令生成的代码？

您甚至可以在此处找到相同的代码http://jsbin.com/obuqip/4/edit

HTML

<div ng-controller="myController">
    {{names[0]}} {{names[1]}}
    <br/> <hello-world my-username="names[0]"></hello-world>
    <br/> <hello-world my-username="names[1]"></hello-world>
    <br/><button ng-click="clicked()">Click Me</button>
</div>

的Javascript

var components= angular.module('components', []);
components.controller("myController",
    function ($scope) {
        var counter = 1;
        $scope.names = ["Number0","lorem","Epsum"];
        $scope.clicked = function() {
            $scope.names[0] = "Number" + counter++;
        };
    }
);

// **Here is the directive code**
components.directive('helloWorld', function() {
    var directiveObj =  {
        link:function(scope, element, attrs) {
            var strTemplate, strUserT = attrs.myUsername || "";
            console.log(strUserT);
            if(strUserT) {
                strTemplate = "<DIV> Hello" + "{{" + strUserT +"}} </DIV>" ;
            } else {
                strTemplate = "<DIV>Sorry, No user to greet!</DIV>" ;
            }
            element.replaceWith(strTemplate);
        },
        restrict: 'E'
    };
    return directiveObj;
});

Answer 1

这是一个不使用编译功能或链接功能的版本：

myApp.directive('helloWorld', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      myUsername: '@'
    },
    template: '<span><div ng-show="myUsername">Hello {{myUsername}}</div>'
    + '<div ng-hide="myUsername">Sorry, No user to greet!</div></span>',
  };
});

请注意，模板包含在＆lt; span＆gt;中因为模板需要有一个根元素。（如果没有＆lt; span＆gt;，它将有两个＆lt; div＆gt;根元素。）

需要稍微修改HTML，以进行插值：

<hello-world my-username="{{names[0]}}"></hello-world>

Fiddle

Answer 2

代码：http://jsbin.com/obuqip/9/edit

components.directive('helloWorld', function() {
    var directiveObj =  {
        compile:function(element, attrs) {
            var strTemplate, strUserT = attrs.myUsername || "";
            console.log(strUserT);
            if(strUserT) {
                strTemplate = "<DIV> Hello " + "{{" + strUserT +"}} </DIV>" ;
            } else {
                strTemplate = "<DIV>Sorry, No user to greet!</DIV>" ;
            }
            element.replaceWith(strTemplate);
        },
        restrict: 'E'
    };
    return directiveObj;
});

说明：在编译函数中应该使用相同的代码而不是链接函数。 AngularJS确实编译了生成的编译函数内容。

Answer 3

您需要从模板创建角度元素并使用$compile服务

jsBin

components.directive('helloWorld', ['$compile', function(compile) {
    var directiveObj =  {
        link: function(scope, element, attrs) {
            var strTemplate, strUserT = attrs.myUsername || "";
            console.log(strUserT);
            if (strUserT) {
                strTemplate = "<DIV> Hello" + "{{" + strUserT +"}} </DIV>" ;
            } else {
                strTemplate = "<DIV>Sorry, No user to greet!</DIV>" ;
            }

            var e = angular.element(strTemplate);
            compile(e.contents())(scope);
            element.replaceWith(e);
        },
        template: function() {
            console.log(args);
            return "Hello";
        },
        restrict: 'E'
    };
    return directiveObj;
}]);

如何让AngularJS编译指令生成的代码？

3 个答案: