Question

AngularJS的新手，我很难理解指令的一些细节。我有一个场景，我想使用一个没有翻译的指令（我想？），在指令的隔离控制器中使用指令属性的值来获取附加数据以提供给指令的模板......（希望如此满口的话出来了吗？）。

也许这个伪示例会让我更清楚我想要实现的目标：

someDirective.js：

angular.module('someDirective', [
    'someService',
])

.directive('someDirective', function() {
    function SomeController($scope, someService) {
        $scope.additionalData = someService.getStuff(/* ??? I want to use 'someKey' here */);
    }

    return {
        restrict: 'E',
        controller: SomeController,
        scope: {
            someKey: '='
        },
        template: '{{additionalData | json}}'
    };
});

directiveUser.tpl.html：

<someDirective someKey="someKeyFromTheOuterScope"/>

请注意，我的指令模板不需要直接使用键值，而是指令控制器提供的附加数据。

我读过的所有文档都直接在模板中使用提供的范围属性数据，或者通过指令链接函数的'attrs'参数。我不认为链接是我想要的，因为我不是在操纵DOM而只是想要为指令的模板提供额外的数据。

我从根本上误解了什么？

Answer 1

如果我理解正确的话，您可以使用范围来获取someKey的值...试试这个：

angular.module('myApp', [])
.controller('myController', function($scope) {
    $scope.outerScopeKey = 'outer scope key';
})
.service('someService', function() {
    this.getStuff = function(someKey) {
        return someKey;
    };
})
.directive('someDirective', function() {
    function SomeController($scope, someService) {
        $scope.additionalData = someService.getStuff($scope.someKey);
    }

    return {
        restrict: 'E',
        controller: SomeController,
        scope: {
            someKey: '='
        },
        template: '{{ additionalData | json }}'
    };
});

你的HTML看起来像这样：

<div ng-controller="myController">
    <some-directive some-key="outerScopeKey"/>
</div>

因此自定义指令位于另一个控制器内部，来自控制器（外部作用域）的数据被传递到指令中，然后传递给服务。

以下是fiddle

在指令控制器内使用指令范围属性值（不是模板）

1 个答案: