无法在指令的控制器中访问指令的作用域对象

Question

MaterialIn.directive.js

angular.module('mdt')
    .directive('mdtMaterialins', materialInsDirective);

function materialInsDirective() {
    return {
        restrict: 'E',
        scope: {
            materialoffers: '=',

        },
        bindToController: true,
        templateUrl: 'app/materialOffers/materialIns/materialIns.html',
        controllerAs: 'materialInsVm',
        controller: MaterialinsController
    };
}
function MaterialinsController($scope) {
    var vm = this;
console.log(vm);  //shows the materialoffers object present
console.log(vm.materialoffers);  //show undefined

}

Hi everyone.i made a directive and send it an array of objects "materialoffers",i can access it on the html page it is working fine,but idk why i cant access it inside the controller,it shows undefined,can anyone please tell me a way i can use that materialoffers inside the controller,i want to get its length and store it in a $scope variable like this

vm.total=vm.materialoffers.length;

Answer 1

Seems like materialoffers variable may get its value after a $http call or similar, as in it doesn't instantly have a value when the directive is created. The console.log(vm) shows the variable since it shows the state of the object (vm in this case) when you click it. You can test this phenomenon with the following code in your browser console:

var object = {};
object; // logs the object in console, shows an empty object
window.setTimeout(function() {
    object.testValue = "test value"
}, 10000) // After 10 seconds, the object will get the property testValue

If you click the object before the 10 seconds have passed, it won't have the property, but after you click on it after 10 seconds, you will see the added property there.

Try replacing your controller code with this:

function MaterialinsController($scope) {
    var vm = this;

    $scope.$watch(function() { return vm.materialoffers }, function() {
        console.log(vm.materialoffers)
    });
}