AngularJS: переменная Scope не определена в контроллере
Я создаю новый Scope внутри такой директивы
controllersModule.directive('uploadBox', function() {
return {
restrict: 'E',
scope: {
topic: '=topic',
label: '=label'
},
templateUrl: '/assets/directives/uploadBox.html'
};});
И используйте эту директиву как это (оба значения -label и topic- являются значениями, которые хранятся в файлах JSON, в двух разных контроллерах)
<upload-box label="lc.getTerm('system_upload')" topic="tc.currentTopic.uID"></upload-box>
Таким образом, метка атрибута и тема передаются в новую (созданную) область. Теперь самое смешное, хотя я могу получить доступ к обоим значениям в HTML файле шаблона (uploadBox.html)
<div ng-controller="DropUploadCtrl">
<button class="btn btn-success" dropzone="dropzoneConfig">
<!-- label is correctly shown -->
{{ label }}
</button>
<!-- this link works fine: Evaluates to something like aaa/54dg54...SHA128-Hash...G4FX-->
<a ng-href="aaa/{{ topic }}">BB</a>
</div>
Только значение метки доступно изнутри DropUploadController.
controllersModule.controller('DropUploadCtrl', ['$scope',function($scope) {
var that = this;
console.log($scope.label); // this is working fine
console.log($scope.topic); // this is undefined
// some more stuff here
}]);
Я знаю, что области создаются для определенных контроллеров, и вы не можете передавать переменные области между двумя контроллерами. Однако я не думаю, что это проблема, потому что я могу использовать значение метки. Но, где я ошибаюсь, что неправильно в моем коде?
большое спасибо
РЕДАКТИРОВАТЬ:
Выходной сигнал для rootScope в контроллере
console.log("$scope::>");
console.log($scope.label);
console.log($scope.topic);
console.log("$rootScope::>")
console.log($rootScope.label);
console.log($rootScope.topic);
выглядит так:
"$scope::>"
"I'm a label"
undefined
"$rootScope::>"
undefined
undefined
Кроме того, значение не определено в функции ссылки директивы
Edit2: решение найдено! Значение в tc.currentTopic.uID не было заполнено в тот момент, когда другой контроллер инициализировался. Поэтому выражение {{topic}} работало нормально, потому что оно было снова оценено, когда значение изменилось, через пару мс позже. Теперь я получаю данные прямо через $ routeParams.
Директивы имеют изолированные области. Поскольку вы добавили:
scope: {
topic: '=topic',
label: '=label'
},
он создал изолированную область. Но, угловая документация говорит: =
или =attr
- устанавливает двунаправленную привязку между локальным свойством scope и свойством родительской видимости имени, определяемого значением атрибута attr. Если имя attr не указано, предполагается, что имя атрибута совпадает с локальным именем. Учитывая <widget my-attr="parentModel">
и определение виджета области видимости: { localModel:'=myAttr' }
, то свойство scope widget localModel будет отображать значение parentModel
в родительской области. Любые изменения в parentModel
будут отражены в localModel
и любые изменения в localModel будут отображаться в parentModel
.
Ссылка здесь
Во-первых, если вы запустите console.log(scope.label);
в вашей функции директивной ссылки (которой у вас нет на данный момент, вам придется добавить ее), получается ли это значение?
Во-вторых, похоже, что вы хотите, чтобы директива изменила значение в области родительского контроллера. Иногда вы можете получать странные вещи, когда вы это делаете. В этом ответе рекомендуется обертывать эти значения в контроллере в объекте.