angular.module('hellosolarsystem').component('hello', {
    template: '<h3><input ng-model="name">{{name}}{{$ctrl.greeting}} solar sytem!</h3>' +
    '<button ng-click="$ctrl.toggleGreeting()">toggle greeting</button>',

    controller: function($scope) {
        this.greeting = 'hello';
        $scope.name = "111";
        this.toggleGreeting = function() {
            this.greeting = (this.greeting == 'hello') ? 'whats up' : 'hello'
        }
    }
});
<!DOCTYPE html>
<html lang="en" ng-app="ComponentTestApp">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body ng-controller="MainCtrl as ctrl">
<p>我 {{ctrl.person.relation}} 的名字是 {{ctrl.person.name}}</p>
<div style="border:solid 1px red; padding:10px;">
    <hero-detail relation="ctrl.person.relation" name="ctrl.person.name"></hero-detail>
</div>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script>
    (function (angular) {
        app = angular.module('ComponentTestApp', []);

        app.controller('MainCtrl', function () {
            this.person = {
                relation: "父亲",
                name: "张三"
            };
        });

        function HeroDetailController($scope) {
        }

        app.component('heroDetail', {
            template: '<p>relation(双向)：<input type="text" ng-model="$ctrl.relation"></p><p>name(单向)：<input type="text" ng-model="$ctrl.name"></p><p>我 {{$ctrl.relation}} 的名字是 {{$ctrl.name}}</p>',
            controller: HeroDetailController,
            bindings: {
                relation: '=',
                name: '<'
            }
        });
    })(angular);
</script>
</body>

</html>
<!DOCTYPE html>
<html lang="en" ng-app="ComponentTestApp">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
<div ng-controller="MainCtrl">
    <h1>$scope 按引用传递</h1>
    <p>我 {{person.relation}} 的名字是 {{person.name}}</p>

    <div style="border:solid 1px red; padding:10px;">
        <hero-detail person="person"></hero-detail>
    </div>
</div>


<div ng-controller="MainCtrl2">
    <h1>$scope 按值传递</h1>
    <p>我 {{person.relation}} 的名字是 {{person.name}}</p>

    <div style="border:solid 1px red; padding:10px;">
        <hero-detail2 relation="person.relation" name="person.name"></hero-detail2>
    </div>
</div>


<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script>
    (function (angular) {
        app = angular.module('ComponentTestApp', []);

        app.controller('MainCtrl', ["$scope", function ($scope) {
            $scope.person = {
                relation: "父亲",
                name: "张三"
            };
        }]);

        function HeroDetailController($scope) {
            $scope.person = this.person
        }

        app.component('heroDetail', {
            template: '<p>relation：<input type="text" ng-model="person.relation"></p><p>name：<input type="text" ng-model="person.name"></p><p>我 {{person.relation}} 的名字是 {{person.name}}</p>',
            controller: HeroDetailController,
            bindings: {
                person: '<'
            }
        });


        app.controller('MainCtrl2', ["$scope", function ($scope) {
            $scope.person = {
                relation: "父亲",
                name: "张三"
            };
        }]);

        function HeroDetailController2($scope) {
            $scope.relation = this.relation
            $scope.name = this.name
        }

        app.component('heroDetail2', {
            template: '<p>relation：<input type="text" ng-model="relation"></p><p>name：<input type="text" ng-model="name"></p><p>我 {{relation}} 的名字是 {{name}}</p>',
            controller: HeroDetailController2,
            bindings: {
                relation: '=',
                name: '<'
            }
        });
    })(angular);

</script>
</body>

</html>

Related Posts