AngularJS：范围变量在控制器内未定义

Question

I create a new Scope within a directive like this

controllersModule.directive('uploadBox', function() {
return {
    restrict: 'E',
    scope: {
        topic: '=topic',
        label: '=label'
    },
    templateUrl: '/assets/directives/uploadBox.html'
};});

And use this directive like this (both values -label and topic- are values, which are stored in JSON files, within two different controllers)

<upload-box label="lc.getTerm('system_upload')" topic="tc.currentTopic.uID"></upload-box> 

So the attribute label and topic are both passed to the new (created) Scope. Now, the funny thing is, while I'm able to access both values within the template HTML file (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>

Only the label value is accessible from within the 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

}]);

I know that scopes are created for specific controllers and you cannot share scope variables directly between two controllers. However, I don't think that this is a problem here because I can use the label value. But, where am I wrong respectively what is wrong in my code?

Thank you very much

EDIT:

The output for the rootScope within the controller

console.log("$scope::>"); 
console.log($scope.label); 
console.log($scope.topic); 
console.log("$rootScope::>") 
console.log($rootScope.label); 
console.log($rootScope.topic); 

looks like this:

"$scope::>" 
"I'm a label" 
undefined 
"$rootScope::>" 
undefined 
undefined 

Furthermore, the value is undefined in the link function of the directive

Edit2: The solution has been found! The value in tc.currentTopic.uID was not filled at the moment the other controller was initializing. That's why the expression {{topic}} was working fine because it has been evaluated again, when the value has changed, a couple of ms later. I fetch the data now directly via $routeParams.

Answer 1

Directives have isolated scopes. Since you added:

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

it created an isolated scope. But, angular documentation says: = or =attr - set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given <widget my-attr="parentModel"> and widget definition of scope: { localModel:'=myAttr' } , then widget scope property localModel will reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel and any changes in localModel will reflect in parentModel .

Link here

Answer 2

First thing, if you run console.log(scope.label); in your directive's link function (which you don't have at the moment, you'd have to add it), is it getting a value?

Secondly, it looks like you want the directive to change a value in the parent controller's scope. Sometimes you can get strange things happening when you do this. In this answer , it recommends wrapping those values in your controller in an object.