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. [CQOI2012]组装 贪心

    [CQOI2012]组装 贪心好题. LG传送门 首先有一个必须要能推的式子:设第\(i\)种零件选的生产车间位置为\(x _ i\),组装车间位置为\(x\), 则总的花费为 \[f(x) = \s ...

  2. window下查杀占用端口的进程

    一. 查找占用的端口进程号,比如8080 C:> netstat –ano|findstr 8080 C:\Users\chry>netstat -ano | findstr 8080 T ...

  3. 解决 spring-test 出现 Failed to load ApplicationContext 的异常

    在使用spring-test的时候,在启动@Test的方法时,spring-test会去加载spring的配置文件,这个时候如果配置文件没有在 @ContextConfiguration 中写全,就会 ...

  4. unable to locate package

    一.问题 在ubuntu上安装npm时 sudo apt-get install npm 出现了错误: unable to lcoate package npm 二.解决办法 更新下apt就好了 su ...

  5. Python之冒泡排序算法

    顾名思义,冒泡排序直观的意思是气泡越大冒的越快:),对应到我们的列表中就是数字最大的先选出来,然后依次进行.例如 myList = [1,4,5,0,6],比较方式为: 相邻的两个数字先进行比较,也就 ...

  6. 不把DB放进容器的理由

    原文地址:http://www.tuicool.com/articles/6VbqeqQ 原文为英文,以下是笔者的个人总结. 此处的DB包括但不限于Redis.ElasticSearch. 1.数据安 ...

  7. CAN总线的显性电平为什么能覆盖隐性电平？

    摘要:在CAN总线中,显性电平是强驱动,隐性电平时弱驱动,因此当有的节点发送显性电平有的节点发送隐性电平时,总线上呈现的肯定是强驱动的状态,这就是CAN总线显性电平可以覆盖隐性电平的原因. 大家都知道 ...

  8. 修复bug有哪些更快的技术？做好这6点就够了

    你有没有想过为什么有时修复错误似乎比它应该花费更长的时间?当你终于找到问题时,事实证明你所需要的只是一个小小的改变.然而,花了很多时间才能找到正在发生的事情.这种情况比我想象的更频繁. 另一方面,当您 ...

  9. JUC——阻塞队列

    Queue是一个队列,而队列的主要特征是FIFO先进先出,要实现生产者与消费者模型,也可以采用队列来进行中间的缓冲读取,好处是:生产者可以一直不停歇的生产数据. BlockingQueue是Queue ...

  10. C/C++作用域运算符::

    ::是运算符中等级最高的,它分为三种:全局作用域符,类作用域符,命名空间作用域符 全局作用 全局作用域符号:当全局变量在局部函数中与其中某个变量重名,那么就可以用::来区分如:  char ch; / ...