首页 \ 问答 \ 在AngularJS中,为什么指令需要自己?(In AngularJS, why would a directive require itself?)

在AngularJS中,为什么指令需要自己?(In AngularJS, why would a directive require itself?)

我正在尝试从angular-ui代码中学习。 我看到btnRadio指令需要自己。 我知道指令可能require控制器,然后在link函数的第四个参数中将它们作为数组访问。 我不明白为什么指令会要求自己。

.directive('btnRadio', function () {
  return {
    require: ['btnRadio', 'ngModel'],
    controller: 'ButtonsController',
    link: function (scope, element, attrs, ctrls) {
      var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
      ...

https://github.com/angular-ui/bootstrap/blob/master/src/buttons/buttons.js#L15

这只是需要自己的控制器,对吗? 这个的目的是什么,或者它解决了什么问题?


I'm trying to learn from the angular-ui code. I see that the btnRadio directive requires itself. I understand that directives may require controllers and then access them as an array in the fourth parameter of the link function. I don't understand why a directive would require itself though.

.directive('btnRadio', function () {
  return {
    require: ['btnRadio', 'ngModel'],
    controller: 'ButtonsController',
    link: function (scope, element, attrs, ctrls) {
      var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
      ...

https://github.com/angular-ui/bootstrap/blob/master/src/buttons/buttons.js#L15

This is just requiring its own controller, right? What is the purpose of this, or what problem is it solving?


原文:https://stackoverflow.com/questions/23226822
更新时间:2020-03-26 12:00

最满意答案

该应用程序的结构对我来说非常奇怪。 似乎他们可以更好地定义它:

angular.module('ui.bootstrap')
  .controller('ButtonsController', function($scope, buttonConfig) {
    $scope.activeClass = buttonConfig.activeClass || 'active';
    $scope.toggleEvent = buttonConfig.toggleEvent || 'click';
  })
  .directive('btnRadio', function() {
    return {
      require: 'ngModel',
      controller: 'ButtonsController',
      link: function(scope, elem, attrs, ngModel) {
        // These are now available here in the link function
        scope.activeClass;
        scope.toggleEvent;
        // ... other functionality
      }
    }
  });

但是,@ Jeff是对的。 他们这样做,以便他们可以访问ButtonsController 。 如果你在代码中向下看,他们只是用它来访问activeClasstoggleEvent属性。

我能够按照当前的方式进行思考的唯一原因是避免在指令上生成隔离范围。 隔离范围可能会干扰此库外部的代码。


The structure of that application is very odd to me. It seems that they could better define it like this:

angular.module('ui.bootstrap')
  .controller('ButtonsController', function($scope, buttonConfig) {
    $scope.activeClass = buttonConfig.activeClass || 'active';
    $scope.toggleEvent = buttonConfig.toggleEvent || 'click';
  })
  .directive('btnRadio', function() {
    return {
      require: 'ngModel',
      controller: 'ButtonsController',
      link: function(scope, elem, attrs, ngModel) {
        // These are now available here in the link function
        scope.activeClass;
        scope.toggleEvent;
        // ... other functionality
      }
    }
  });

However, @Jeff is right. They do it so that they will have access to the ButtonsController. If you look further down in the code, they're just using it to access the activeClass and toggleEvent attributes.

The only reason I can think for doing it the way that it currently is done would be to avoid generating an isolate scope on the directive. An isolate scope might interfere with code that is external to this library.

2014-04-22

相关文章

更多

最新问答

更多
  • css在元素之前中断列而不破坏包装器(css break column before element without breaking the wrapper)
  • 如何在Xamarin共享项目中使用自定义渲染器(How to use Custom Renderer in Xamarin Shared Project)
  • 如何为特定表中的特定字段设置唯一?(How to set unique for specific field from specific table?)
  • Google SDK iOS - sign()方法完成处理程序(Google SDK iOS - sign() method completion handler)
  • 在具有接口{}值的地图上实现String()(Implement String() on a map with interface{} values)
  • 检查数据库中是否已存在用户名(Check if username already exist in DB)
  • 使用javascript进行ajax调用时阻止用户交互(Block user interaction while doing ajax call using javascript)
  • 什么'if(err)'在Javascript中精确测试?(What does 'if (err)' tests precisely in Javascript?)
  • jQuery mouseleave无法正常工作(jQuery mouseleave not working)
  • 寻求使用的一些说明(Seeking some clarification on use of )
  • 将数组传递给注释的语法(syntax for passing array to annotation)
  • 用于从两个日期范围之间的文件中提取数据的Shell脚本(Shell script to extract data from file between two date ranges)
  • 元素隐藏但父()没有(Element hides but parent() not)
  • 如何使用Google App Engine Java平台开发web ui(How to develop web ui with Google App Engine Java platform)
  • 对于OWL A级;(For an OWL class A; Getting all properties that A is their domain)
  • Excel VBA公式格式问题(Excel VBA Formula Format Issue)
  • ORA - 02287序列号不允许在这里(ORA - 02287 sequence number not allowed here)
  • Github拉忽略特定文件(Github Pull Ignore Specific File)
  • SQL CONVERT函数在SQL Server中工作但不在应用程序中(SQL CONVERT function working in SQL Server but not in application)
  • backbone.js适用于大型应用程序(backbone.js for large applications)
  • 防止程序关闭(Preventing program from closing)
  • 生成不带图像的heightMap(Generating a heightMap without an Image)
  • Bootstrap - 如何将包含文本的div居中?(Bootstrap - How to center div that has text inside it?)
  • Android - 片段findViewById()总是null?(Android - Fragment findViewById() always null?)
  • 确定CSS中的高度(Figuring out heights in CSS)
  • 使用__autoload包含类和使用命名空间(Use __autoload to include class and use namespace)
  • setTimeout()不允许我传递文本值[重复](setTimeout() doesn't allow me to pass text values [duplicate])
  • 在NSUserDefault中恢复值(Restoring value in NSUserDefault)
  • 知道如何将这种下沉的悬停效果添加到图像/链接吗?(Any idea how to add this sinking hover effect to an image/link?)
  • 在XIB中淡入/淡出UISegmentedControl(fade in/fade out UISegmentedControl in XIB)