javascript - 指令 Controller 显示错误

标签 javascript angularjs

我打算只关注指令 Controller 的使用。因此,请回答与我假设的每个指令使用实例相同的错误,angular 将在指令中提到的 Controller 部分中出现一次。

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

//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});

//app declaration
app.directive('myStudent',function(){
return{
	template: "Hi! Dear!! {{name}}<br/>",
	controller:function(scope, elem, attr){
		console.log("controller");
	}
}
});
<body ng-app="myApp" ng-controller="myCtrl"> 

<my-student></my-student> 
<my-student></my-student> 
<my-student></my-student> 
<my-student></my-student> 
<my-student></my-student> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
</body> 

注意:

Kindly, throw light on error and on usage of directive controller only. I know same can be done by pre-link, post-link, or compile.

PS:我不明白一些外星天才的否决!

最佳答案

我觉得应该是链接函数而不是 Controller 。

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

//controller declaration
app.controller('myCtrl', function($scope) {
  $scope.name = "Peter";
});

//app declaration
app.directive('myStudent', function() {
  return {
    template: "Hi! Dear!! {{name}}<br/>",
    link: function(scope, elem, attr) {
      console.log("controller");
    }
  }
});
<body ng-app="myApp" ng-controller="myCtrl">

  <my-student></my-student>
  <my-student></my-student>
  <my-student></my-student>
  <my-student></my-student>
  <my-student></my-student>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
</body>

Best Practice: use controller when you want to expose an API to other directives. Otherwise use link.

Controller 接受一个数组:

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

//controller declaration
app.controller('myCtrl', function($scope) {
  $scope.name = "Peter";
});

//app declaration
app.directive('myStudent', function() {
  return {
    template: "Hi! Dear!! {{name}}<br/>",
    controller: [
      function(scope, elem, attr) {
        console.log("controller");
      }
    ]
  }
});
<body ng-app="myApp" ng-controller="myCtrl">

  <my-student></my-student>
  <my-student></my-student>
  <my-student></my-student>
  <my-student></my-student>
  <my-student></my-student>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
</body>

为了进一步阅读,我建议 angular documentation on directives

关于javascript - 指令 Controller 显示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41135909/

相关文章:

javascript - jQuery dataTable 默认不显示数据

javascript - 需要将带有变量的 $scope 以 Angular 方式传递到另一个页面?

javascript - 在标记中获取 AngularJS 对象属性名称

javascript - 在 Protractor 测试用例中使用属性

css - 隐藏和显示 Bootstrap 网格列

javascript - 如何在 DOM 更改后检查元素是否为空?

javascript - 一个 HTML 表单,其中包含用于不同任务的多个提交按钮

javascript - 如何使用 Node 读取 block 中的文件?

javascript - 如何在 intern JS 中捕获异常?

javascript - AngularJS $范围未定义