Angular 学习笔记 2

散热无奈

于 2014-12-04 12:47:06 发布

阅读量516

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/ivolianer/article/details/41722409

版权

AngularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

有些 directive 会创建独立的 scope。

为了更直观的认识 scope，可以使用一款插件。

https://github.com/rev087/ng-inspector

ng-controller

<html>
<body>

<div id="div1">
    {{value}}
    <div ng-controller="controller1"
         ng-click="changeValue()">
        {{value}}
    </div>
</div>

<script src="../lib/angular.js"></script>
<script>
    angular.module('module1', [])
            .run(function ($rootScope) {
                $rootScope.value = "module1";
            })
            .controller('controller1', function ($scope, $rootScope) {
                console.log($scope.$parent === $rootScope);
                $scope.changeValue = function () {
                    $scope.value = "controller1";
                }
            });

    var div1 = document.getElementById("div1");
    angular.bootstrap(div1, ['module1']);
</script>
</body>
</html>

ng-repeat

<html>
<body>
<style>
    div.selected {
        background: aquamarine;
    }
</style>

<div id="div1">
    <div ng-repeat="person in persons"
         ng-class="{selected:isSelected($index)}"
         ng-click="select($index)">
        {{person}}
    </div>
</div>

<script src="../lib/angular.js"></script>
<script>
    angular.module('module1', [])
            .run(function ($rootScope) {
                $rootScope.persons = [
                    'Linda', 'Mike', 'John'
                ];

                $rootScope.indexSelected = 0;
                $rootScope.isSelected = function (index) {
                    return index === $rootScope.indexSelected;
                };
                $rootScope.select = function (index) {
                    $rootScope.indexSelected = index;
                };
            });

    var div1 = document.getElementById("div1");
    angular.bootstrap(div1, ['module1']);
</script>
</body>
</html>