AngularJS: переменная Scope не определена в контроллере

116
10

Я создаю новый 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.

спросил(а) 2015-01-05T22:09:00+03:00 5 лет, 10 месяцев назад
1
Решение
59

Директивы имеют изолированные области. Поскольку вы добавили:

 scope: {
topic: '=topic',
label: '=label'
},

он создал изолированную область. Но, угловая документация говорит: = или =attr - устанавливает двунаправленную привязку между локальным свойством scope и свойством родительской видимости имени, определяемого значением атрибута attr. Если имя attr не указано, предполагается, что имя атрибута совпадает с локальным именем. Учитывая <widget my-attr="parentModel"> и определение виджета области видимости: { localModel:'=myAttr' }, то свойство scope widget localModel будет отображать значение parentModel в родительской области. Любые изменения в parentModel будут отражены в localModel и любые изменения в localModel будут отображаться в parentModel.

Ссылка здесь

ответил(а) 2015-01-05T23:07:00+03:00 5 лет, 10 месяцев назад
42

Во-первых, если вы запустите console.log(scope.label); в вашей функции директивной ссылки (которой у вас нет на данный момент, вам придется добавить ее), получается ли это значение?

Во-вторых, похоже, что вы хотите, чтобы директива изменила значение в области родительского контроллера. Иногда вы можете получать странные вещи, когда вы это делаете. В этом ответе рекомендуется обертывать эти значения в контроллере в объекте.

ответил(а) 2015-01-05T22:26:00+03:00 5 лет, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема