angular1.5 组件学习 -- 2.1、组件间的交互：父向子

最新推荐文章于 2024-07-27 02:02:04 发布

weixin_30740295

最新推荐文章于 2024-07-27 02:02:04 发布

阅读量161

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guofan/p/8360012.html

版权

一个组件干一个事，一个完整的功能有时需要多个组件协调完成，这就少不了组件间的数据交互，那先来记录下父组件向子组件传递数据。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>父组件向子组件传递变量</title>
    <script src="angular.js"></script>
</head>

<body>
    <father-component></father-component>
    <script>
        angular.module('myApp',[])
            .component('fatherComponent', {
                template: "<h3>father-component <input ng-model='$ctrl.sayHello'></h3>" + 
                "<child-component say-some='$ctrl.sayHello'></child-component>",
                controller: function () {
                    this.sayHello = 'Hello';
                }
            })
            .component('childComponent', {
                template: "<h3>child-component <input ng-model='$ctrl.saySome'></h3>",
                controller: function () {
                    this.$onChanges = function (event) {
                        console.log(event);
                    }
                },
                bindings: {
                    saySome: "<"
                }
            })
    </script>
</body>
</html>