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

最新推荐文章于 2020-04-28 18:41:41 发布

weixin_34307464

最新推荐文章于 2020-04-28 18:41:41 发布

阅读量317

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yk123/p/6887061.html

版权

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div ng-app="myApp">
    <div  ng-controller="firstController">
        <div book-list books="books" parent-books="books" scope-title="{{title}}"></div>
    </div>
</div>

<script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
<script type="text/javascript" src="app/index.js"></script>

<script>
</script>

</body>
</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: '<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: 'js'
            },
            {
                name: 'java'
            }
        ];
        $scope.title = "我是title"
    }]);

　　运行结果:

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

weixin_34307464

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS1笔记-(14)-自定义指令(scope)

index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><div ng-app="myApp"> <div ng-controller="first...
复制链接

扫一扫