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. 基于 Keras 用 LSTM 网络做时间序列预测

    目录 基于 Keras 用 LSTM 网络做时间序列预测 问题描述 长短记忆网络 LSTM 网络回归 LSTM 网络回归结合窗口法 基于时间步的 LSTM 网络回归 在批量训练之间保持 LSTM 的记 ...

  2. 基于 Keras 用深度学习预测时间序列

    目录 基于 Keras 用深度学习预测时间序列 问题描述 多层感知机回归 多层感知机回归结合"窗口法" 改进方向 扩展阅读 本文主要参考了 Jason Brownlee 的博文 T ...

  3. WebUploader在IE9中文件选择按钮点击没反应

    一.问题: 最近做的公司项目里,用户环境一直用的火狐,但是实际的用户群体都是银行人员 政府部门怎么也要用 IE,而且还有一些用的IE版本是古董版本IE9 IE9 相比 IE8 多了图像渲染等,无法兼容 ...

  4. 【转载】COM 组件设计与应用（三）——数据类型

    原文:http://vckbase.com/index.php/wv/1206.html COM 组件设计与应用 系列文章:http://vckbase.com/index.php/piwz?& ...

  5. .net 分布式学习计划

    一: 1:.net分布式系统架构的思路     https://blog.csdn.net/slowlifes/article/details/53162014 2: nginx+iis实现负载均衡 ...

  6. C# 通用树形数据结构

    前言 树在图论中是一种重要的图,由于其自身的许多特殊性质,也是一种重要的计算机数据结构,在很多地方都有用.但是这些树大多都是作为其他应用的内部数据结构来使用.我们无法了解这些树的详细信息,而 .Net ...

  7. 《杜增强讲Unity之Tanks坦克大战》5-子弹

    5 子弹 本节的任务是创建子弹的Prefab   image 首先从Model/Shell找到子弹的模型,拖入Hierarchy中,添加刚体组件,所有属性默认值. 添加Capsule Collider ...

  8. VS Code配置初探

    之前一直在用 Webstorm,看现在 VS Code 热度那么高,想着尝试一下. 熟悉编辑器的快捷键 VS Code 快捷键一览 安装使用到的插件 Chinese(修改你的编辑器语言,默认英文) E ...

  9. python3实现合并两个有序数组

    很早就听同学和师兄经常说刷题很重要,然而编程能力一直都很渣的我最近才开始从leetcode的初级算法开始.今天遇到的这道题虽然很简单,因为是头一次用自己的方法速度还不错,特此记录一下,还大神们请不要嘲 ...

  10. 3分钟手把手带你搭建基于selenium的自动化框架

    1 .什么是seleniumSelenium 是一个基于浏览器的自动化工具,它提供了一种跨平台.跨浏览器的端到端的web自动化解决方案.Selenium主要包括三部分:Selenium IDE.Sel ...