Question

我无法理解为什么变量在指令控制器中未定义：

＆＃13;

'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);
  });
}

＆＃13;

<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>

＆＃13;

为什么没有定义vm.date？如何定义？

我尝试使用与link相同的方法。没问题。

Answer 1

因为构建ExampleController时绑定不存在。从v1.6起，您需要使用$onInit：

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

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

并删除$scope，根本不需要它（避免使用它）。

或者，您可以使用preAssignBindingsEnabled的{{1}}设置重新启用旧的绑定行为：

$compileProvider

但最好切换到.config(function($compileProvider) { $compileProvider.preAssignBindingsEnabled(true); });选项，因为这是从现在开始的方式（以及Angular 2中的方式）。

为什么变量没有在指令控制器中定义？

1 个答案: