AngularJS +1.5父控制器如何将数据传递给组件控制器

Question

I have a component like: 我有一个组件，如：

Check Plunkr Example ( Updated and Working with the solution :) Thanks ) 检查Plunkr示例（更新并使用解决方案:)谢谢）

my-component.js declaration my-component.js声明

 (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 ? 重要的是我有obj =“vm.myObj”的地方吗？ I have something wrong because isn't even taking the vm.title :S 我有些不对劲，因为甚至没有拿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. 我不想只是将vm.myObj值打印到组件中，我希望ParentController中的vm.obj.value可以访问并存储在ComponentController中。

Answer 1

The way we do it with components is using the bindings property. 我们使用组件的方式是使用bindings属性。 It's simplified version of the directives's scope and bindToController properties combined. 它是指令范围和bindToController属性组合的简化版本。

In a directive, the scope property allows us to define whether we want to inherit or isolate the $scope. 在指令中， scope属性允许我们定义是否要继承或隔离$ 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. 通过添加bindToController属性，我们可以定义要传递给隔离范围的属性并直接绑定到控制器。

In a component, with the bindings property this repetitive process is removed as the $scope by default is always isolate. 在组件中，使用bindings属性删除此重复过程，因为默认情况下$ scope始终是隔离的。

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. 从版本1.5开始并且特定于组件的另一个附加是<符号，其表示单向绑定。 Check out the “ Component-based application architecture ” section in the official documentation for more information. 有关详细信息，请查看官方文档中的“ 基于组件的应用程序体系结构 ”部分。

Answer 2

In the above code, first issue is component does not have "bind" property instead it has "bindings" property. 在上面的代码中，第一个问题是组件没有“bind”属性，而是具有“bindings”属性。
Second is to pass the value from the parent controller to component via "obj" attribute. 第二种是通过“obj”属性将值从父控制器传递给组件。

I have corrected it and implemented the code as per your requirements: 我已经纠正了它并根据您的要求实现了代码：

<div ng-controller="ParentController as vm">
<my-component obj="vm.obj"></my-component>
</div>

    .controller('ParentController', ParentController)
    .component('myComponent', {
      bindings: {
        obj: '='
      },
      controller : function() {

      },
controllerAs:'vm',
      template: '<h1>Whatever <br>{{vm.obj.value}}<br>{{vm.obj.value2}}</h1>'

    });

      function ParentController( ) {
        var vm = this;

        vm.obj = {
          value : 1,
          value2: 2
        }
      };

Hope it will help you to solve your issue. 希望它能帮助您解决问题。

AngularJS +1.5父控制器如何将数据传递给组件控制器

问题描述

2 个解决方案

解决方案1
7 已采纳 2016-05-25 15:48:12

解决方案2
0 2016-05-25 15:51:13

AngularJS +1.5父控制器如何将数据传递给组件控制器

问题描述

2 个解决方案

解决方案1 7 已采纳 2016-05-25 15:48:12

解决方案2 0 2016-05-25 15:51:13

解决方案1
7 已采纳 2016-05-25 15:48:12

解决方案2
0 2016-05-25 15:51:13