Доступ к изолированной области в шаблоне угловой директивы

В настоящее время я пишу директиву angular, которая использует шаблон в другом файле 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


angularjs angular-directive angularjs-scope
person CodeO    schedule 11.01.2016    source источник
comment
Можете ли вы добавить jsfiddle?   -  person Adam Axtmann    schedule 11.01.2016
comment
Я только что сделал. {{mapid}} должен быть thisisthemapid в выходных данных, но это не так. Операторы консоли тоже странные. В моей консоли я вижу атрибут mapid, но $scope.mapid не определен...   -  person CodeO    schedule 11.01.2016

Ответы (1)


arrow_upward
3
arrow_downward

Ваша скрипка была неправильной, так как вы не определили свой контроллер или неправильно ввели $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
        }
    ]}
});

Скрипка

Обратите внимание, что в моем примере введенная переменная в контроллере вашей директивы должна быть $scope, а не scope, по соображениям согласованности.

person David L    schedule 11.01.2016
comment
Спасибо, этот пример работает! У вас случайно нет идеи, где ошибка в моем реальном приложении? Я использую аналогичную настройку, и с пустым контроллером (директивы) все работает. В тот момент, когда я копирую некоторый код цезия и зависимость от углового цезия в контроллер, этот код выполняется, но шаблоны {{mapid}} не заменяются. Что я мог сделать, чтобы найти ошибку? - person CodeO; 12.01.2016
comment
Начните с консоли и посмотрите, есть ли у вас какие-либо ошибки. Это всегда будет вашим лучшим выбором. - person David L; 12.01.2016
comment
Спасибо. Единственные ошибки, которые я получаю, связаны с этим кодом внутри. Код не может найти элемент, так как для идентификатора не задано значение mapid. Если я установлю этот идентификатор вручную, я вообще не получаю никаких ошибок. Очень странно. - person CodeO; 12.01.2016
comment
Затем у вас есть состояние гонки, когда ваш код ищет идентификатор до запуска директивы. Если это так, похоже, что вы используете антиугловой подход для начала, поскольку вы не должны управлять активностью идентификаторов в DOM. - person David L; 12.01.2016
comment
Спасибо. Да, я использую здесь не угловой код, но разве директива не является правильным способом включения этого кода? Есть ли (простой) способ запустить этот код только после того, как директива заменит свою работу? - person CodeO; 14.01.2016
comment
В этом случае вам нужно будет вызвать код из вашей директивы и при необходимости запустить соответствующие циклы дайджеста, используя $timeout. - person David L; 14.01.2016