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"

    }]);

　　运行结果:

angularJS1笔记-(14)-自定义指令(scope)的更多相关文章

  1. angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)

    自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...

  2. angularJS1笔记-(10)-自定义指令(templateUrl属性)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. angularJS1笔记-(12)-自定义指令(compile/link)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. angularJS1笔记-(9)-自定义指令(restrict/template/replace)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  8. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

  9. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

随机推荐

  1. Devc++编程过程中的一些报错总结

    以下都是我在使用Devc++的过程中出现过的错误,通过查找资料解决问题,今天小小地记录.整理一下. 1.[Error] invalid conversion from 'const char*' to ...

  2. 乘积尾零——第九届蓝桥杯C语言B组（省赛）第三题

    原创 标题:乘积尾零 如下的10行数据,每行有10个整数,请你求出它们的乘积的末尾有多少个零? 5650 4542 3554 473 946 4114 3871 9073 90 4329 2758 7 ...

  3. JavaWeb基础—监听器Listener

    javaWeb三大组件: servlet listener(用的不多) filter 什么叫监听器: 初次相见:AWT 二次相见:SAX(XML解析时)Bundle 绑定 监听器是一个接口,内容由我们 ...

  4. 【转】Win10/UWP新特性系列—Web

    Internet Explorer Internet Explorer 在Windows 10 升级为Edge模式,是一种交互性和兼容性都很强的新型浏览器,该浏览器相比以前的版本更新了超过2000个操 ...

  5. 【BZOJ1044】[HAOI2008]木棍分割

    [BZOJ1044][HAOI2008]木棍分割 题面 bzoj 洛谷 题解 第一问显然可以二分出来的. 第二问: 设\(dp[i][j]\)表示前\(i\)个,切了\(j\)组的方案数 发现每次转移 ...

  6. 【项目管理】 使用IntelliJ IDEA 将项目发布(提交)到GitLab

    https://blog.csdn.net/zsq520520/article/details/51004721 gitlab地址: http://192.168.1.81:200   idea项目p ...

  7. [webapp]ios safari 正确使用js跳转

    在safari上,以往屡试不爽的location.href = url; 变得不好用了.使用该方法跳转到新的网页,无法使用后退按钮回到上个页面.想想也是,直接修改值得方式跳转总是怪怪的,但是从刚学网页 ...

  8. C#/VB.NET与西门子PLC进行ModbusTcp通信

    进入自动化行业半年多了,每天都与机器打交道. 前段时间接手一个任务,需要将我们机台与下站机台进行通讯,我们机台是PC,下站机台为西门子S7-1200. 想想完成这个任务,领导就会对我这个新人刮目相看, ...

  9. Qt 利用XML文档，写一个程序集合 四

    接上一篇https://www.cnblogs.com/DreamDog/p/9214067.html 启动外部程序 这里简单了,直接上代码吧 connect(button,&MPushBut ...

  10. [环境配置]Ubuntu 16.04+CUDA 9.0+OpenCV 3.2.0下编译基于Caffe的MobileNet-SSD踩过的一些坑

    SSD是Caffe的一个分支,源码在github上:https://github.com/weiliu89/caffe/tree/ssd $ git clone https://github.com/ ...