使用控制器作为内部指令模板时访问控制器的 this

Question

在不使用隔离作用域的情况下，如何访问指令及其模板中控制器的 This？

app.controller('ChildCtrl', function() {
  this.name = "Name from children";
});

Answer 1

简单地将它解析为 controller as instance value 到你的指令范围，就像这样 simple fiddle demo:

查看

<div ng-controller="MyCtrl as ctrl">
  Hello, <span simple-directive data="ctrl.name"></span>!
</div>

AngularJS申请

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

myApp.controller('MyCtrl', function ($scope) {
    this.name = 'Superhero';
});

myApp.directive('simpleDirective', function () {
  return {
    restrict: 'A',
    scope: {
      data: '='
    },
    template: '{{ data }}',
    link: function (scope, elem, attrs) {
        console.log(scope.data);
    }
  }
});

另一种方法是使用 controller:'MyCtrl as ctrl' 将控制器解析为指令，就像 demo fiddle.

查看

Hello, <span simple-directive></span>!

AngularJS申请

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

myApp.controller('MyCtrl', function ($scope) {
  this.name = 'Superhero';
});

myApp.directive('simpleDirective', function () {
  return {
    restrict: 'A',
    controller:'MyCtrl as ctrl',
    template: '{{ ctrl.name }}'
  }
});

您还可以将孔控制器实例解析到范围内并像这样访问它 demo fiddle.

查看

<div ng-controller="MyCtrl as ctrl">
  Hello, <span simple-directive ctrl="ctrl"></span>!
  <br />
  <input type="text" ng-model="ctrl.name">
</div>

AngularJS申请

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

myApp.controller('MyCtrl', function ($scope) {
    this.name = 'Superhero';
});

myApp.directive('simpleDirective', function () {
  return {
    restrict: 'A',
    scope: {
      ctrl: '='
    },
    template: '{{ ctrl.name }}',
    link: function (scope, elem, attrs) {
    }
  }
});

使用控制器作为内部指令模板时访问控制器的 this

Access this of a controller when using controller as inside directive template

angularjs

controlleras

查看

AngularJS申请

查看

AngularJS申请

查看

AngularJS申请