angularJS1笔记-(14)-自定义指令(scope)

index.html:

　　index.js:

var myApp = angular.module('myApp', [])
    .directive('bookList', function () {
        return {
            restrict: 'ECAM',
            controller: function ($scope) {
                // console.log($scope);

                //方式1：&books
                // $scope.books = $scope.a(); //可以重新赋值

                //方式2：双向绑定 在控制器里改也会改变view的值
                // $scope.books = $scope.b;
                // $scope.b.push({
                //     name:"nodejs"
                // })

                //方式3：
                 console.log($scope.c)
            },
            // scope:false,//如果scope此时为真就会和下面的scope是同一个作用域 如果为假的时候就会创建一个继承了父scope的新的作用域
            scope: {
                //方式1：
                //当scope为对象的时候 也会创建一个继承了父scope的新的scope 但是却无法继承父类的数据源
                //将父元素books封装成一个a函数
                // a: '&books' //a就是可以访问到页面中的一个属性books 从而访问到值 而a会生成一个函数

                //方式2：双向绑定
                // b:'=parentBooks'

                //方式3：单向绑定 只能绑定简单类型 不能绑定对象类型
                c:"@scopeTitle"
            },
            controllerAs: 'bookListController', //起一个别名
            template: '
{{book.name}}
',
            replace: true
        }
    })
    .controller('firstController', ['$scope', function ($scope) {
        console.log($scope);
        $scope.books = [
            {
                name: 'php'
            },
            {
                name: 'js'
            },
            {
                name: 'java'
            }
        ];
        $scope.title = "我是title"
    }]);

　　运行结果:

 

转载于:https://www.cnblogs.com/yk123/p/6887061.html