angularjs笔记
  • Introduction
  • 依赖注入
  • 作用域
  • 数据绑定
    • 控制器->模板->控制器->模板
  • 多个控制器
  • $scope对象
    • $apply方法、$digest方法
    • $watch方法
    • 示例:购物车
  • 模块和控制器
  • $provide对象的provider、factory、service方法
    • 多个控制器内共享数据
  • 过滤器(Filters)
    • number、currency、date
    • limitTo、lowercase、uppercase
    • filter、orderBy、json
    • 示例:产品列表
    • 自定义过滤器
  • 控制器(controller)
    • 显式和隐式依赖注入
  • 指令
    • Angular 内置指令
    • Angular 自定义指令
      • restrict、template、replace属性
      • templateUrl属性
      • transclude、priority、terminal属性
      • compile && link属性
      • controller && controllAs属性
      • require属性
      • scope属性
  • Module里其他方法
    • constant、value、run方法
  • Form表单
    • 示例:注册页
  • XHR和服务器端的通信
    • $http
  • JavaScript基础
    • .isFunction是否为函数
  • 资料链接
  • 功能组件
    • Tooltip
    • CSV
  • 其他
    • $watchCollection
    • $controller 继承
    • 两个对象合并
    • 页面关闭
    • AngularJs 时间格式化处理
    • 数据的本地存储
    • 页面的URL
Powered by GitBook
On this page

Was this helpful?

  1. 指令
  2. Angular 自定义指令

scope属性

  • scope:为当前指令创建⼀一个新的作用域,而不是使之继承父作用域

  • false 继承父元素的作⽤用域

    true 创建一个新的作⽤用域

    object 独立的scope

  • object:参数 &:作用域把父作用域的属性包装成一个函数,从而以函数的方式读写父作用域的属性

    =:作用域的属性与父作用域的属性进行双向绑定,任何一方的修改均影响到对方

    @:只能读取⽗父作⽤用域⾥里的值单项绑定

例子:

index.html

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
<div ng-app="myApp">

    <div ng-controller="firstController">
        {{
            books
        }}
        <div book-list books="books" parent-books="books" parent-title="{{title}}">

        </div>

    </div>
</div>

<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>

app/index.js

  angular.module('myApp', [])

    .directive('bookList', function () {
        return {
            restrict: 'ECAM',
            controller: function ($scope) {

                // &books
                // $scope.books = $scope.a();

                // =books;
                // $scope.books = $scope.b;
                // $scope.b.push({name:'nodejs'});

                console.log($scope.c);

            },
            // 创建一个有继承链的独立作用域
            // scope:true,

            // 当为对象的时候也会创建一个独立的作用域
            scope:{
                // 将父元素books封装成一个a函数
                // a:'&books'
                // 双向绑定 b = parentBooks属性对应的父作用域的表达式
                // b:'=parentBooks'

                // 使用简单数据类型的方法
                c:'@parentTitle'
            },
            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: 'javascript'
            },
            {
                name: 'java'
            }
        ];

        $scope.title = '张三';

    }]);
Previousrequire属性NextModule里其他方法

Last updated 6 years ago

Was this helpful?