1

我有两个类限制指令，命名fooThing和barThing.

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

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

当我这样做时<div class="{{baz}}-thing"></div>，{{baz}}已正确替换，但未加载指令。

当我这样做时<div class="foo-thing"></div>，该指令已正确加载。

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

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

4

2 回答 2

1

正如 Anders 所建议的那样，创建一个创建指令（一种指令工厂）的指令是我所追求的。Guillaume86提供了一个很好的方法来做到这一点。

于 2013-02-17T23:07:02.880 回答
0

为此，您的模板必须首先在作用域上编译和执行（以替换 {{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>
于 2013-02-14T07:37:41.293 回答