本文介绍了AngularJS +1.5父控制器如何将数据传递给组件控制器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个类似的组件:



(更新并使用解决方案:)谢谢)



my-component.js声明

 (function(){
'use strict';
angular
.module('app')
.component(myComponent ,{
bindings:{obj:=},
controller:ComponentController,
controllerAs:vm,
模板:
'< section class =result>< h2> {{vm.title}}< / 2>'+
'< h3>使用父控制器值< / h3>'+
' < ul>< li> {{vm.obj.a}}< / li>< li> {{vm.obj.b}}< / li>< / ul>'+
'< h3>使用儿童控制器值:'+
'< ul class =component-controller>< li> {{vm.copiedObj.a}}< / li>< ;李> {{vm.copiedObj.b}}< /立GT;< / ul>'+
'< / section>'
});

})();

my-component controller

 (function(){
'use strict';
angular
.module('app')
.controller('ComponentController',ComponentController) ;

函数ComponentController(){
var vm = this;

vm.title =我是儿童控制器

vm.copiedObj = vm.obj; //这应该存储位于MainController中的myObj变量
}

})();

和父控制器

 (function(){
'use strict';
angular
.module('app',[]);
})();


// app.controller.js
// ///////////////////
(功能(){
'use strict';
angular
.module('app')
.controller('MainController',MainController);

function MainController(){
var vm = this;

vm.title =我是父控制器;

vm.myObj = {
a:我是第一个价值,
b:我是第二个价值
};

}
})();

所以,如果我有一个类似的模板

 < body ng-controller =MainController as vm> 

< h2> {{vm.title}}< / h2>

< my-component obj =vm.myObj>< / my-component>

< / body>

重要的一行是我有obj =vm.myObj对吗?
我有什么不对,因为甚至没有拿vm.title:S



我不想只是将vm.myObj值打印到组件,
i希望来自ParentController的vm.obj.value可以访问&存储在ComponentController中。

解决方案

我们使用组件的方式是使用 绑定 属性。它是指令的 范围 bindToController 属性的简化版本。



在指令中, 范围 属性允许我们定义是否要继承或隔离$ scope。随着时间的推移,这种选择被推断为合理的默认值,几乎总是使我们的指令具有孤立的范围。通过添加 bindToController 属性,我们可以定义要传递给隔离范围的属性,并直接绑定到控制器。



在组件中,使用 绑定 属性,此重复过程将被删除,因为默认情况下$ scope始终是隔离的。



一般示例:

  //指令
.directive(myDirective,函数myDirective(){
return {
scope:{},// isolate scope
bindToController:{
value:=/ /双向绑定
}
};
});

//组件
.component(myComponent,{
bindings:{
value:=//双向绑定
}
});

详细示例:

  angular 
.module(myApp)
.controller(MyController,function MyController(){
var vm = this;

vm.myObj = {
a:1,
b:2
};
})
.component(myComponent,{
绑定:{value:=},
控制器:MyComponentController,
控制器:vm,
模板:< ul>< li> vm .value.a< / li>< li> vm.value.b< / li>< / ul>
});

在模板中,您可以传递数据,如下所示:

 < div ng-controller =MyController as vm> 
< my-component value =vm.myObj>< / my-component>
< / div>

如上所述,默认情况下,数据绑定到(组件)控制器并可在其中访问。 / p>

请注意,我们在此处使用 双向 绑定。从版本1.5开始提供的另一个特定于组件的附加功能是 < 符号,表示 单向 绑定。查看了解更多信息。


I have a component like:

Check Plunkr Example ( Updated and Working with the solution :) Thanks )

my-component.js declaration

 (function() {
  'use strict';
  angular
    .module('app')
    .component("myComponent", {
      bindings: { obj: "=" },
      controller: "ComponentController",
      controllerAs: "vm",
      template:
        '<section class="result"><h2>{{vm.title}}</2>' +
        '<h3>Using the Parent Controller values</h3>' +
        '<ul><li>{{ vm.obj.a }}</li><li>{{vm.obj.b}}</li></ul>' +
        '<h3>Using the Children controller values:'+
        '<ul class="component-controller"><li>{{ vm.copiedObj.a }}</li><li>{{vm.copiedObj.b}}</li></ul>' +
        '</section>'
    });

  })();

my-component controller

 (function() {
  'use strict';
  angular
    .module('app')
    .controller('ComponentController', ComponentController);

  function ComponentController() {
    var vm = this;

    vm.title = "I'm the Children controller"

    vm.copiedObj = vm.obj;   // This should store the myObj variable located in the MainController
  }

  })();

and a Parent Controller

(function() {
  'use strict';
  angular
    .module('app', []);
})();


// app.controller.js
// ///////////////////
(function() {
  'use strict';
  angular
    .module('app')
    .controller('MainController', MainController);

  function MainController() {
    var vm = this;

    vm.title = "I'm the Parent controller";

    vm.myObj = {
      a: "I'm the first value",
      b: "I'm the second value"
    };

  }
  })();

So if i have a template like

  <body ng-controller="MainController as vm">

    <h2>{{vm.title}}</h2>

    <my-component obj="vm.myObj"></my-component>

  </body>

The important line is where i have obj="vm.myObj" right ?I have something wrong because isn't even taking the vm.title :S

I don't want just to print the vm.myObj values into the component,i want the vm.obj.value from the ParentController to be accessible & stored in the ComponentController.

解决方案

The way we do it with components is using the bindings property. It’s simplified version of the directives’s scope and bindToController properties combined.

In a directive, the scope property allows us to define whether we want to inherit or isolate the $scope. That choice has, with time, been deduced to a sensible default to almost always make our directives have isolate scope. And with the addition of the bindToController property, we can define which properties we want to pass down to the isolate scope and bind directly to the controller.

In a component, with the bindings property this repetitive process is removed as the $scope by default is always isolate.

General Example:

// directive
.directive("myDirective", function myDirective() {
    return {
        scope: {},              // isolate scope
        bindToController: {
            value: "="          // two-way binding
        }
    };
});

// component
.component("myComponent", {
    bindings: {
        value: "="              // two-way binding
    }
});

Detailed Example:

angular
    .module("myApp")
    .controller("MyController", function MyController() {
        var vm = this;

        vm.myObj = {
            a: 1,
            b: 2
        };
    })
    .component("myComponent", {
        bindings: { value: "=" },
        controller: "MyComponentController",
        controllerAs: "vm",
        template: "<ul><li>vm.value.a</li><li>vm.value.b</li></ul>"
    });

In your template, you can pass down the data like so:

<div ng-controller="MyController as vm">
    <my-component value="vm.myObj"></my-component>
</div>

As explained above, the data is bound to and accessible in the (component's) controller by default.

Note that we’re using two-way binding here. Another addition that is available as of version 1.5 and is specific to components is the < symbol which denotes one-way bindings. Check out the "Component-based application architecture" section in the official documentation for more information.

这篇关于AngularJS +1.5父控制器如何将数据传递给组件控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-24 18:37
查看更多