AngularJS +1.5哪有父控制器将数据传递到组件控制器

我有这样一个组成部分：AngularJS +1.5哪有父控制器将数据传递到组件控制器

Check Plunkr Example（更新，并与解决方案合作:)谢谢）

我-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>' 
    }); 

    })();

我的组件控制器

(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 
    } 

    })();

和一个父控制器

(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" 
    }; 

    } 
    })();

所以，如果我有一个像

<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值到组件，我想从ParentController的vm.obj.value存储在ComponentController中的可访问&。

来源

2016-05-25 Héctor León

''应该可以工作.... – Claies

但它不会... –

好吧，您的示例实际上并未显示您*使用你传入的值，所以你的具体问题可能不是很明显。 – Claies

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

在指令中，范围属性允许我们定义我们是否要继承或隔离$范围。随着时间的推移，这种选择已经被推断为明智的默认，几乎总是让我们的指示隔离范围。并且，通过添加属性，我们可以定义我们想要传递给隔离范围的哪些属性，并直接绑定到控制器。

在一个部件，与所述绑定属性这种重复处理作为默认$范围总是隔离除去。

普通的例子：

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

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

详细示例：

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>" 
    });

在你的模板，你可以传递下来的数据，像这样：

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

至于解释以上，d ata在默认情况下绑定到（component）控制器并且可以访问。

请注意，我们使用双向绑定在这里。另外除了可用作为版本1.5，并且是特定于组件是<符号其表示单向绑定。查看official documentation中的“基于组件的应用程序体系结构”部分以获取更多信息。

来源

2016-05-25 15:48:12

感谢您的回答，但我没有得到这个工作，我更新了链接到Plunkr样本与我们的代码合并后，但仍然失败：S –

我创建了** [新] （http://plnkr.co/edit/Cd3lp6ve7gcQORcUQpJC?p=preview)**，因为你的问题很多。我希望这可以帮助你更好地理解组件。干杯! –

@DimitarRusev我们应该能够通过简单地将它们绑定到正确的值来访问像“myObj”这样的控制器属性值？不需要吗？ – Winnemucca

在上面的代码中，第一个问题是组件没有“绑定”属性，而是它具有“绑定”属性。
其次是通过“obj”属性将父控制器的值传递给组件。

我已经纠正，并实现代码按您的要求：

<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 
     } 
     };

希望它会帮助你解决你的问题。

来源

2016-05-25 15:51:13

感谢您的回答，但我不知道我在哪里发生了错误，请检查我在plunkr上的回购:) –

两个问题：1.将“MyComponentController”替换为“ComponentController”2.在vm.objStoredInComponentController = obj中， obj没有定义，所以首先定义var obj = {a：'Done !!!'};然后把上面的行3.你现在完成！ –

Omg感谢与控制器名称的错字，但我仍然没有这样做：S objStoredInComponentController应该等于从父母的变种MyObj –

AngularJS +1.5哪有父控制器将数据传递到组件控制器

回答

相关问题