2016-12-21 4 views
3

я не могу понять, почему эта переменная не определена в контроллере директивы:Почему переменные не определены в контроллере?

'use strict'; 
 

 
angular 
 
    .module('app', []) 
 
    .directive('myExample', myExample, ['$scope']); 
 

 
function myExample() { 
 
    var directive = { 
 
     restrict: 'E', 
 
     template: '<span>{{vm.date}}</span>', 
 
     scope: {}, 
 
     controller: ExampleController, 
 
     controllerAs: 'vm', 
 
     bindToController: { 
 
      date: '@' 
 
     } 
 
    }; 
 

 
    return directive; 
 
} 
 

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

 
    // I need here some code with vm.date 
 
    // BUT vm.date is undefined 
 
    // Why? 
 
    console.log('Ctrl: %s', vm.date); 
 

 
    $scope.$watch('vm.date', function (newValue, oldValue) { 
 
     // vm.date is 777 
 
     console.log('Ctrl: %s | %s', oldValue, newValue); 
 
    }); 
 
}
<body ng-app="app"> 
 
    <my-example date="777"></my-example> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> 
 
</body>

Почему vm.date не определен? Как это сделать, чтобы определить?

Я попытался использовать тот же метод с link. Нет проблем.

ответ

5

Поскольку привязка не существует в тот момент, когда построена ExampleController. Поскольку v1.6 вам нужно использовать $onInit:

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

    this.$onInit = function() { 
    console.log('Ctrl: %s', vm.date); 
    } 
} 

И удалить $scope, вам не нужно вообще (избежать).

В качестве альтернативы, вы можете снова включить старое связывающее поведение с preAssignBindingsEnabled установкой $compileProvider:

.config(function($compileProvider) { 
    $compileProvider.preAssignBindingsEnabled(true); 
}); 

но лучше переключиться на $onInit вариант, так как это то, как он будет теперь (и как это в угловых 2) ,

+0

Я использую '$ scope' для тестов. Спасибо вам за помощь! Он работает с '$ onInit'. Я думаю, что 'vm. $ OnInit' более приятный. – raciasolvo

Смежные вопросы