scope属性

scope:为当前指令创建⼀一个新的作用域，而不是使之继承父作用域
false 继承父元素的作⽤用域
true 创建一个新的作⽤用域
object 独立的scope
object:参数 &:作用域把父作用域的属性包装成一个函数，从而以函数的方式读写父作用域的属性
=:作用域的属性与父作用域的属性进行双向绑定，任何一方的修改均影响到对方
@:只能读取⽗父作⽤用域⾥里的值单项绑定

例子：

index.html

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
<div ng-app="myApp">

    <div ng-controller="firstController">
        {{
            books
        }}
        <div book-list books="books" parent-books="books" parent-title="{{title}}">

        </div>

    </div>
</div>

<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>

app/index.js

  angular.module('myApp', [])

    .directive('bookList', function () {
        return {
            restrict: 'ECAM',
            controller: function ($scope) {

                // &books
                // $scope.books = $scope.a();

                // =books;
                // $scope.books = $scope.b;
                // $scope.b.push({name:'nodejs'});

                console.log($scope.c);

            },
            // 创建一个有继承链的独立作用域
            // scope:true,

            // 当为对象的时候也会创建一个独立的作用域
            scope:{
                // 将父元素books封装成一个a函数
                // a:'&books'
                // 双向绑定 b = parentBooks属性对应的父作用域的表达式
                // b:'=parentBooks'

                // 使用简单数据类型的方法
                c:'@parentTitle'
            },
            controllerAs:'bookListController',
            template: '<div><ul><li ng-repeat="book in books">{{book.name}}</li></ul></div>',
            replace:true

        }

    })


    .controller('firstController', ['$scope', function ($scope) {
        console.log($scope);

        $scope.books = [
            {
                name: 'php'
            },
            {
                name: 'javascript'
            },
            {
                name: 'java'
            }
        ];

        $scope.title = '张三';

    }]);

Previousrequire属性 NextModule里其他方法

Last updated 6 years ago

Was this helpful?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> {{ books }} <div book-list books="books" parent-books="books" parent-title="{{title}}"> </div> </div> </div> <script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script> <script type="text/javascript" src="app/index.js"></script> </body> </html>

angular.module('myApp', []) .directive('bookList', function () { return { restrict: 'ECAM', controller: function ($scope) { // &books // $scope.books = $scope.a(); // =books; // $scope.books = $scope.b; // $scope.b.push({name:'nodejs'}); console.log($scope.c); }, // 创建一个有继承链的独立作用域 // scope:true, // 当为对象的时候也会创建一个独立的作用域 scope:{ // 将父元素books封装成一个a函数 // a:'&books' // 双向绑定 b = parentBooks属性对应的父作用域的表达式 // b:'=parentBooks' // 使用简单数据类型的方法 c:'@parentTitle' }, controllerAs:'bookListController', template: '<div><ul><li ng-repeat="book in books">{{book.name}}</li></ul></div>', replace:true } }) .controller('firstController', ['$scope', function ($scope) { console.log($scope); $scope.books = [ { name: 'php' }, { name: 'javascript' }, { name: 'java' } ]; $scope.title = '张三'; }]);