角'this'在指令控制器中不起作用

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

要在controller內部指令中使用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";
  }
};

請參閱此問題以了解內容

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所有內容，即您在控制器中使用ctrl命名為vm 。

我使用ctrl來顯示在視圖中用來引用它的名稱（由controllerAs設置）與您在控制器函數中this的名稱之間沒有關聯。 用不同的controllerAs引用來引用不同的控制器是很正常的，因此現在您可以在視圖中引用它們。