Question

我想制作一个方程标签，并使用标签属性来查找要使用的方程式。为此，我有以下应用程序：

(function(){
    var app = angular.module('mathDocument', []);

    app.directive('equation', function(){
        return {
            restrict: 'E',
            scope: {
                label: '@label'}, 
            templateUrl: 'eqnElement.html',
        };
    });

    app.controller("DocumentController", function(){
        this.equations = {
                "mainresult": { labeled: true,
                                label: 'mainresult',
                                body: 'e^{i\\pi} = -1',
                              }
        };
    });
})();

eqnElement.html中的模板：

<body ng-controller="DocumentController as doc">
    <div>
        {{ doc.equations[label].body }}
    </div>
</body>

但是，当我尝试使用方程式标签时，

<equation label="mainresult"></equation>

我最终没有得到任何东西。如果我改为使用{{ label }}，我最终会看到mainresult作为模板的输出。

从我读过的内容来看，隔离范围的使用对控制器的影响很大，可能是问题，但是我很难让我的调试器向我展示任何有用的信息。有没有办法使这项工作，或者我应该考虑以不同的方式设计？

Answer 1

如果你将equations传递给指令范围，你也可以访问它们：

(function(){
    var app = angular.module('mathDocument', []);

    app.directive('equation', function(){
        return {
            restrict: 'E',
            scope: {
                label: '@label',
                equations: '='
            }, 
            templateUrl: 'eqnElement.html',
        };
    });

    app.controller("DocumentController", function($scope){
        $scope.equations = {
                "mainresult": { labeled: true,
                                label: 'mainresult',
                                body: 'e^{i\\pi} = -1',
                              }
        };
    });
})();

调用指令时：

<equation equations="equations" label="mainresult"></equation>

和eqnEquation.html：

<div>
    {{ equations[label].body }}
</div>

Answer 2

您从未将doc绑定到指令中的范围。注入方程式服务并在范围内调用doc，然后它将起作用。

AngularJS指令：将HTML属性作为字符串，用作字典键

2 个答案: