Question

我看到过像这样创建的指令：

angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

myCustomer指令现在位于Controller控制器上。如果我在不同的文件中定义我的模块和控制器和指令，如下所示：

docsApp.js：

angular.module('docsSimpleDirective', []);

docsController.js：

angular.module('docsSimpleDirective')
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])

docsSimpleDirective.js：

angular.module('docsSimpleDirective')
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

如何将myCustomer连接到Controller以便能够在s中显示<my-customer>

Answer 1

myCustomer指令现在位于Controller控制器
上

不，一点也不。它与控制器无关。它碰巧期望范围内的客户变量，并且控制器恰好在其范围内设置这样的变量。但是你可以在任何视图中使用你想要的指令。

在两个示例中，您使用控制器和指令的方式完全相同。无论是在同一文件中还是在不同文件中定义它们都不会改变任何内容：只要这些文件都由html页面的<script>标签加载，就会以相同的方式工作：如果控制器在HTML元素控制器中使用，该指令将显示控制器范围的客户：

<div ng-controller="Controller"> 
    <my-customer></my-customer>
</div>

Answer 2

您可以在＆＃39;控制器＆＃39;中指定它。 “我的客户”的功能＆＃39;指令，

angular.module('docsSimpleDirective')
.directive('myCustomer', function() {
  return {
    restrict:'E',
    controller:'Controller',
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

或

在指令标签

周围使用ng-controller

<div ng-controller = "Controller" > 
     <my-customer></my-customer>
</div>

Answer 3

我认为这取决于你放置myCustomer指令的位置，就像假设一样有这个div连接到Controller范围，如果你把你的指令放在这个div

<div ng-controller = "Controller" > 
     <my-customer></my-customer>
</div>

然后它将访问您的控制器（Controller）范围并打印出名称和地址

如何从模块向控制器添加指令？

3 个答案: