Question

我有以下代码。为什么vm.name无效？为什么控制器内的this未被检测到？避风港我为指令定义了一个封闭的scope

我做错了什么？

var mod = angular.module('myApp', []);

mod.directive('myObj', myObject);

function myObject(){
  return {
      restrict: 'E',
      templateUrl: 'my-obj.html',
      scope: {},
      controller: myController
  };

  function myController(){
    var vm = this;

    vm.name="vfdfbdn";
  }
}

Answer 1

要在控制器内部指令中使用this，您需要使用controllerAs: 'ctrl'，但在模板中，您需要在所有名称前加上{{ctrl.name}}，或者您可以使用$ scope，如：

function myController($scope) {
    $scope.name="vfdfbdn";
}

Answer 2

function myObject(){
  return {
      restrict: 'E',
      template: '<div>{{c.name}}</div>',
      scope: {},
      controller: myController,
      controllerAs: 'c'
  };

  function myController(){
    var vm = this;

    vm.name="vfdfbdn";
  }
};

请参阅this question了解相关事项

Answer 3

试试这个：

function myObject() {
    return {
        restrict: 'E',
        templateUrl: 'my-obj.html',
        scope: {},
        bindToController: true,
        controller: myController
    };
}


myController.$inject = ['$scope'];

function myController($scope){
  var vm = this;
  vm.name="vfdfbdn";}

Answer 4

您需要告诉Angular您将如何从视图中的控制器引用this。

function myObject(){
  return {
      restrict: 'E',
      templateUrl: 'my-obj.html',
      scope: {},
      controller: myController,
      controllerAs: 'ctrl'
  };
}

现在，您可以使用this引用您在控制器中命名为vm的{{1}}指定的所有内容。

我使用 ctrl 来显示您在视图中用来引用它的名称与ctrl设置的名称以及您为{{1}提供的名称之间没有相关性在控制器功能内部。引用具有不同 controllerAs 引用的不同控制器是正常的，因此您现在可以在视图中引用它们。

Angular＆＃39; this＆＃39;不在指令控制器内工作

4 个答案: