在角度指令模板中访问隔离范围

Question

我目前正在编写一个角度指令，该指令使用不同 HTML 文件中的模板和隔离模板。该指令通过 @ 获取一些字符串到其范围，并且该值在控制器函数中可用。 不知何故，它无法通过 HTML 模板中的 {{}} 获得。为什么呢？我该如何改变呢？我使用父范围阅读了一些关于模板的内容，但我并不完全理解。

这是一个代码示例：

angular.module('moduleName')

.directive('aGreatDirective', function () {
    return {
        restrict: 'E',
        scope: {
            mapid: '@'
        }, 
        templateUrl: "path/to/template.html",

        controller: ['$scope', function (scope) {
            console.log($scope.mapid); // is defined
       }
    }
});

以及模板的html代码：

<div id="{{mapid}}"></div>

浏览器中的结果与它应该在的地方完全一样：

<div id="theValueOfmapid"></div>

感谢您的帮助！

PS 这是一个 jsfiddle：fiddle

Answer 1

您的小提琴不正确，因为您没有正确定义控制器或 $scope 注入。以下将正常工作：

模板：

<div ng-controller="MyCtrl">
    <a-great-directive mapid="thisisthemapid"></a-great-directive>
    Some other code
</div>

js:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function () {
});

myApp.directive('aGreatDirective', function() {
    return {
        restrict: 'E',
        scope: {
            mapid: '@'
        },
        template: "<div id='{{mapid}}'> {{mapid}} </div>",
        controller: ['$scope', function($scope) {
            console.log($scope.mapid); // is defined
        }
    ]}
});

Fiddle

请注意，在我的示例中，出于一致性原因，指令控制器中的注入变量应该是 $scope，而不是 scope。