Question

我需要在指令中包含ng-controller并在html中访问其属性。但是，我无法让它发挥作用。

这是我的app.js文件内容：

angular.module('myModule', [])
.directive('myDirective', function()
{
   transclude: true,
   template: '<div ng-controller="MyController as ctrl" ng-transclude></div>'
});

我无法访问MyController中定义的任何属性（比如消息）。我的html页面上的这段代码不起作用（即消息不会被打印）：

<my-directive>
    {{ ctrl.message }}
</my-directive>

我在这里错过了什么吗？

Answer 1

angular.module('myModule', [])
.controller('MyController', function($scope) {
  $scope.message = 'Hello from Scope';
  $scope.me = this;
  this.scope = $scope;
  this.message = 'Hello from Controller';
  $scope.click = function(scope) {
    alert('Alert message!!!');
  }
  this.click = function(){
    alert('Controllers click!!!')
  }
})
.directive('myDirective', function() {
  return {
    restrict:'E',
    scope: {
      ctrl: "="
    },
    transclude: true,
    template: '<div ng-click="ctrl.scope.click()">'
      +'Scope message:{{ctrl.scope.message}}<br/>Controller message: {{ctrl.message}}<br />'
      + '</div><div ng-click="ctrl.click()">Click me!</div>';
  }
});

你可以尝试这样做...希望它可以帮助你...... Plunker：see all code

访问指令中定义的角度控制器

1 个答案: