最近很多小伙伴都在问bindToController：指令中的对象和v-bind指令这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展.net–ApiController与OData

最近很多小伙伴都在问bindToController：指令中的对象和v-bind指令这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展.net – ApiController与ODataController在露出DTO时、Angular 学习心得 ——directive 的 bindToController 选项、angular.js指令中的controller、compile与link函数的不同之处、AngularJS 1.4指令：作用域，双向绑定和bindToController等相关知识，下面开始了哦！

• bindToController：指令中的对象（v-bind指令）
• .net – ApiController与ODataController在露出DTO时
• Angular 学习心得 ——directive 的 bindToController 选项
• angular.js指令中的controller、compile与link函数的不同之处
• AngularJS 1.4指令：作用域，双向绑定和bindToController

bindToController：指令中的对象（v-bind指令）

指令bindToController可以是布尔值或对象，后者在此处显示：

myMod.directive(''myDirective'', {  controller: ''MyDirectiveController'',  bindToController: {    name: ''@''  }});

但是它没有被记录的事实引起了疑问。为什么要bindToController: { ... }首先制作功能？有有用的方案吗？

尽管bindToController
并非主要用于此目的，但有趣的是，现在如何将其angular.component
用作bindings属性来填补1.5和2.0之间的空白，而scope绑定仍未使用。

答案1

只是偶然发现了这个PR，这是很有解释性的。

我不确定在scope: { ... }和中使用两个不同的绑定是否有实际的好处bindToController: { ...}。但最终，绑定也带入了原型继承的范围：

bindToController: {  text: ''@text'',  obj: ''=obj'',  expr: ''&expr''},scope: true

.net – ApiController与ODataController在露出DTO时

Angular 学习心得 ——directive 的 bindToController 选项

      the component''s properties are bound to the controller rather than to the scope.

      we can move all our property binding definitions to bindToController and make it an object literal

     这两段话引用自 Pascal Precht 在 thoughtram blog 上的一篇文章 (链接：http://blog.thoughtram.io/angularjs

/2015/01/02/exploring-angular-1.3-bindToController.html)

      意思是，当使用了 bindToController 选项后，组件的属性会被绑定到 controller 上，而不是 scope 上，并且我们可以把原本定义在 scope 中的属性绑定都迁移到 bindToController 选项中来，并成为对象字面量的形式

      意即，原本像如下形式的绑定策略：

scope:{
   name:''='',
   age:''=''
}

    更改为如下的形式：

bindToController:{
   name:''='',
   age:''=''
}

  接着，我们需要 controller 和 controllerAs 的帮忙，对 controller 进行实例化：

bindToController:{
   name:''='',
   age:''=''
},
controller: function(){
  var vm = this
},
controllerAs: ''ctrl''

此时，controller已经作为对象字面量的形式而存在了，ctrl是它的实例，
于是，我们可以在template中，以ctrl.XXXX的形式来调用被绑定到controller上的组件属性

这里附上具体的 demo：

https://jsfiddle.net/lee1994522/rvu0xqut/4/

但如果需要在 link 函数的 dom 操作中用到这些绑定的属性，该怎么办呢？按照原来的做法，我们当然是使用 scope.xxxx 的形式来调用这些属性，但现在我们不用 scope 了，所以，我们要借助 require 选项，如下：

require:''这里是指令的名称''

接着，在 link 函数传入第四个参数 ctrl，我们就可以使用这些属性了，再附上 demo：

https://jsfiddle.net/lee1994522/up8mqwy7/

以上是我对 bindToController 的浅薄认识，恳请各位大神指出不足之处，谢谢

angular.js指令中的controller、compile与link函数的不同之处

前言

算了算用angualrjs去做开发也有两个月了，但做为一个菜鸟，难免会被大神吊打(这里有一个悲伤的故事...)。某天一位前端大神问我：你知道angular指令中的controller,compile,link函数有什么不同？然后我就一脸懵逼了....于是决定深入的去探究下。

今天我们来一起了解一下它们有什么不同的地方:

先看一段示例代码

 var ag = angular.module("myApp",[]);
  ag.controller("myCtrl",["$rootScope",function($rootScope){

  }]);
  ag.directive("order",function(){
   return{
    restrict:"AE",
    controller:function($scope, $element, $attrs, $transclude) {
     console.log("controller");
    },
    compile:function(tElement, tAttrs, transclude){
     console.log("compile");
     return{
      pre:function(scope, iElement, iAttrs, controller){
       console.log("pre")
      },
      post:function(scope, iElement, iAttrs, controller){
       console.log("post")
      }
     }
    },
    link:function(scope, iElement, iAttrs, controller){
     console.log("link")
    }
   }
  });

我们可以看到什么order指令中写了controller, complie, link函数;我们可以思考一下上面会输出一下什么来.

从上面的输出结果我们可以得出两个结论:

• 他们的执行顺序不同,最先执行的是complie函数 ; 然后是controller函数,然后是pre函数,最后是post函数.
• link函数没有执行.
  

首先我们来解释第一个问题;看下图

从图中我们可以看到整个 AngularJs 的生命周期分为两个阶段:

第一个阶段是编译阶段:

在编译阶段，AngularJS会遍历整个HTML文档并根据JavaScript中的指令定义来处理页面上声明的指令。每一个指令的模板中都可能含有另外一个指令，另外一个指令也可能会有自己的模板。当AngularJS调用HTML文档根部的指令时，会遍历其中所有的模板，模板中也可能包含带有模板的指令.一旦对指令和其中的子模板进行遍历或编译，编译后的模板会返回一个叫做模板函数的函数。我们有机会在指令的模板函数被返回前，对编译后的DOM树进行修改。

ag.directive("order",function(){
 return{
  restrict:"AE",
  compile:function(tELe ,tAttrs,transcludeFn){
    //进行编译后的dom操作
    return{
      pre:function(scope, iElement, iAttrs, controller){
       // 在子元素被链接之前执行
       // 在这里进行Dom转换不安全
      },
      post:function(scope, iElement, iAttrs, controller){
       // 在子元素被链接之后执行
      }
     }
  }
 }
})

第二个阶段是链接阶段:

链接函数来将模板与作用域链接起来;负责设置事件监听器，监视数据变化和实时的操作DOM.链接函数是可选的。如果定义了编译函数，它会返回链接函数，因此当两个函数都定义了时，编译函数会重载链接函数.(解释上面的结论2)

 var ag = angular.module("myApp",[]);
  ag.controller("myCtrl",["$rootScope",function($rootScope){

  }]);
  ag.directive("order",function(){
   return{
    restrict:"AE",
    controller:function($scope, $element, $attrs, $transclude) {
     console.log("controller");
    },
    link:function(scope, iElement, iAttrs, controller){
     console.log("link")
    }
   }
  });

上面指令执行时;会输出:

我们可以看到controller函数先执行,然后是link函数.但是链接阶段会执行controller,link函数;那么他们有什么不同;我们在什么情况该用哪个?

答案是:

指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为，但链接函数只能在当前内部指令中定义行为，且无法在指令间复用.link函数可以将指令互相隔离开来，而controller则定义可复用的行为。
实际使用的一些建议:

如果我们希望将当前指令的API暴露给其他指令使用，可以使用controller参数，否则可以使用link来构造当前指令元素的功能性。如果我们使用了scope.$watch()或者想要与DOM元素做实时的交互，使用链接会是更好的选择。

到这里:我们应该有一点了解这三者有什么差异了吧?其实这个问题考的就是我们对AngularJs生命周期的了解.

最后我们用一个实际例子来看一下AngularJs的生命周期:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
 <div parent>
  <div child></div>
 </div>
<script src="../plugins/angularjs/angular.src.js"></script>
<script>
 var ag = angular.module("myApp",[]);
  ag.controller("myCtrl",["$rootScope",function($rootScope){

  }]);
  ag.directive("parent",function(){
   return{
    restrict:"AE",
    controller:function($scope, $element, $attrs, $transclude) {
     console.log("parent controller");
    },
    compile:function(tElement, tAttrs, transclude){
     console.log("parent compile");
     return{
      pre:function(scope, iElement, iAttrs, controller){
       console.log("parent pre")
      },
      post:function(scope, iElement, iAttrs, controller){
       console.log("parent post")
      }
     }
    }
   }
  });
 ag.directive("child",function(){
  return{
   restrict:"AE",
   controller:function($scope, $element, $attrs, $transclude) {
    console.log("child controller");
   },
   compile:function(tElement, tAttrs, transclude){
    console.log("child compile");
    return{
     pre:function(scope, iElement, iAttrs, controller){
      console.log("child pre")
     },
     post:function(scope, iElement, iAttrs, controller){
      console.log("child post")
     }
    }
   }
  }
 });
</script>
</body>
</html>

结果如图:

可以参照上面的angularjs生命周期图来理解.

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

AngularJS 1.4指令：作用域，双向绑定和bindToController

更新 ：在代码的另一部分中一定有些愚蠢。现在可以使用，因此bindToController语法很好。

我们正在使用AngularJS 1.4，它引入了在指令中使用bindToController的新方法。

经过大量的阅读（也许并不能理解所有内容），我们如下定义了指令：

  .directive(''mdAddress'', function mdAddress() {    var directive = {      restrict: ''EA'',      scope: {},      bindToController: {        address: ''=''      },      templateUrl: ''modules/address/address.html'',      controller: AddressController,      controllerAs: ''dir''    };

从这样的另一个视图调用它：

  <md-address address="vm.address"></md-address>

先前已在视图控制器中定义：

  vm.address = {    street: null,    countryCode: null,    cityCode: null,    postalCode: null  };

像这样在指令模板中引用变量：

  <md-input-container>    <label>{{''ADDRESSNUMBER'' | translate}}</label>    <input type="number" ng-model="dir.address.streetNumber">  </md-input-container>

我们花了4小时试图弄清楚为什么我们的指令不起作用。很好，它正在工作，但是控制器和指令之间的双向绑定没有实现，因此vm.address.street被无望地设置为null。

一段时间后，我们只是尝试了旧方法：

  .directive(''mdAddress'', function mdAddress() {    var directive = {      restrict: ''EA'',      scope: {        address: ''=''      },      bindToController: true,      templateUrl: ''modules/address/address.html'',      controller: AddressController,      controllerAs: ''dir''    };

它神奇地工作。知道 为什么 吗？

答案1

更新：

感谢对此博客文章的引用，我需要更新我的答案。从AngularJS 1.4开始，您似乎可以使用

scope: {},bindToController: {  variable: ''=''}

它将（完全）执行与旧语法相同的操作：

scope: {  variable: ''=''},bindToController: true

AngularJS源代码中的有用代码行解释了此行为：

if (isObject(directive.scope)) {  if (directive.bindToController === true) {    bindings.bindToController = parseIsolateBindings(directive.scope,                                                     directiveName, true);    bindings.isolateScope = {};  } else {    bindings.isolateScope = parseIsolateBindings(directive.scope,                                                 directiveName, false);  }}if (isObject(directive.bindToController)) {  bindings.bindToController =      parseIsolateBindings(directive.bindToController, directiveName, true);}

资料来源：AngularJS 1.4.0

原始答案：

希望我能向您解释为什么您遇到的这种行为是正确的，以及您在哪里错过了理解范围绑定概念的原因。

让我解释一下，您在第一个代码段中做了什么：

.directive(''mdAddress'', function mdAddress() {    var directive = {      restrict: ''EA'',      scope: {},      bindToController: {        address: ''=''      },      templateUrl: ''modules/address/address.html'',      controller: AddressController,      controllerAs: ''dir''    };

使用scope: {}，您为mdAddress指令创建了一个隔离范围（没有任何继承）。这意味着：在父控制器和您的指令之间不传递任何数据。

考虑到这一点，关于第二个代码段：

<md-address address="vm.address"></md-address>

vm.address来自您的父控制器/视图的数据将作为表达式分配给指令的address属性，但是由于您之前定义了隔离范围，因此数据不会传递到AddressController该bindToController值中，因此无法使用。

让我们将scope对象定义视为“将传入哪些数据”，并将对象定义视为“
bindToController在我的视图的controllerAs对象中可用的数据”。

因此，现在让我们看一下最后一个（以及有效的代码片段）：

.directive(''mdAddress'', function mdAddress() {    var directive = {      restrict: ''EA'',      scope: {        address: ''=''      },      bindToController: true,      templateUrl: ''modules/address/address.html'',      controller: AddressController,      controllerAs: ''dir''    };

在那里，您也创建了一个孤立的作用域，但是这次您添加了address要作为表达式传递的属性。因此，现在address从第二个片段的视图中传入的您将在控制器的作用域中可用。bindToController:true现在设置，会将当前作用域的所有属性绑定到控制器（或更可能是controllerAs对象）。现在，它可以按您期望的那样工作，因为数据将被传递到合并范围，并且数据将被传递到控制器的模板范围。

简要概述是否有助于您更好地理解scope和bindToController定义对象的概念？

今天关于bindToController：指令中的对象和v-bind指令的介绍到此结束，谢谢您的阅读，有关.net – ApiController与ODataController在露出DTO时、Angular 学习心得 ——directive 的 bindToController 选项、angular.js指令中的controller、compile与link函数的不同之处、AngularJS 1.4指令：作用域，双向绑定和bindToController等更多相关知识的信息可以在本站进行查询。