Question

我有两个类限制指令，名为fooThing和barThing。

我的模板范围中有一个变量baz，设置为foo或bar。

如何在元素指令的 name 中使用该范围变量？

当我执行<div class="{{baz}}-thing"></div>时，{{baz}}被正确替换，但未加载该指令。

当我执行<div class="foo-thing"></div>时，指令正确加载。

我有一种预感，这与Angular的摘要/编译周期有关，但我担心我不知道如何解决它。

如何让Angular首先编译模板的那部分以便我的表达式被评估，然后再次编译，以便将其识别为指令？

Answer 1

正如Anders所建议的那样，制定一个创建指令（一种指令工厂）的指令就是我所追求的。 Guillaume86为此提供了a good method。

Answer 2

为了使用它，你的模板必须首先在一个作用域上编译和执行（以替换{{baz}}），然后再次编译和执行以获得“foo-thing”指令。这是可能的，但它可能会导致其他问题。

你可以做的是创建一个指令工厂，一个创建另一个指令的指令。这是一个例子：

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module("myApp", []);
    myApp.directive('factory', function($compile) {
        return {
            restrict: 'A',
            scope: {
                type: '=factory'
            },
            replace: true,
            link: function($scope, elem, attrs) {
                var compiled = $compile('<'+ $scope.type +'></'+ $scope.type +'>')($scope);
                elem.append(compiled);
            }
        };
    });
    myApp.directive('concrete', function() {
        return {
            restrict: 'E',
            template: "<div>I'm concrete!</div>",
            link: function($scope, elem, attrs) {

            }
        };
    });

    function MyCtrl($scope, $timeout) {
        $scope.directiveType = "concrete";
    }
    </script>
</head>
<body>
    <div ng-controller="MyCtrl">
        <div factory="directiveType"></div>
    </div>
</body>
</html>

如何在（或作为）指令名称中使用{{表达式}}？

2 个答案: