AngularJS-2

1. AngularJS表达式

    <div ng-app="App3">
        <!-- 数字 -->
        <div ng-init="x = 5; y = 10.234"></div>
        <p>{{x * y}}</p>
        <p ng-bind="x * y"></p>
        <hr>
        <!-- 数组 -->
        <div ng-init="arr = [2, '3a', 4, 2, 'a']"></div>
        <p>第2个元素为:{{arr[1]}}</p>
        <p ng-bind="'第2个元素为:' + arr[1]"></p>
        <hr>
        <!-- 字符串 -->
        <div ng-init="name = 'a b c d'"></div>
        <p>{{name}}</p>
        <p ng-bind="name"></p>
        <hr>
        <!-- 对象 -->
        <div ng-init="user = {username:'root', password:'1'}"></div>
        <p>用户名:{{user.username}},密码:{{user.password}}</p>
        <p ng-bind="'用户名:' + user.username + ', 密码:' + user.password"></p>
    </div>
    <script>
        angular.module("App3", []);
    </script>

运行结果:
这里写图片描述

2. AngularJS指令

ng-repeat:重复HTML元素

    <div ng-app="App4">
        <ul ng-init="users=[{name:'q1', password:'z1'}, {name:'w1', password:'x1'}]">
            <!-- ng-repeat:重复HTML元素 -->
            <li ng-repeat="x in users">{{x.name}}</li>
        </ul>
    </div>
    <script>
        angular.module('App4', []);
    </script>

这里写图片描述
自定义指令:.directive()函数

    <div ng-app="App4">
        <ul ng-init="users=[{name:'q1', password:'z1'}, {name:'w1', password:'x1'}]">
            <!-- ng-repeat:重复HTML元素 -->
            <li ng-repeat="x in users">{{x.name}}</li>
        </ul>
        <hr>
        <!-- 自定义指令 -->
        <wang-directive></wang-directive>
        <p wang-directive></p>
    </div>
    <script>
        var app = angular.module('App4', []);
        app.directive('wangDirective', function() {
            return {
                restrict : "EA",
                template : "<h1>自定义指令</h1>"
            };
        });
    </script>

这里写图片描述
注:
restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

3. AngularJS作用域(scope)

  1. 对于AngularJS应用来说,它的MVC分别指:M(模型,当前视图中的可用数据)、V(HTML)、C(JavaScript函数,添加或修改属性)
  2. scope:应用在HTML(视图)和JavaScript(控制器)之间的纽带,它是一个JavaScript对象,有自己的属性和方法
  3. 根作用域:$rootScope,它可以作用在ng-app指令包含的所有HTML元素中。既其作用域整个应用,是各个Controller中scope的桥梁,可用在各个controller中使用
    <div ng-app="App5" ng-controller="controller3">
        <input type="text" name="name" id="name" ng-model="name">
        <h1>{{root}}</h1>
        <button ng-click="fun()">点我</button>
    </div>
    <script>
        var app = angular.module('App5', []);
        app.controller('controller3', function($scope, $rootScope) {
            $scope.name = '惘';
            $rootScope.root = '顾';
            $scope.fun = function() {
                alert($scope.name + $rootScope.root);
            };
        });
    </script>

这里写图片描述

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34229789/article/details/79956844
个人分类: AngularJS
想对作者说点什么? 我来说一句

Learning AngularJS

-

学院

1970年01月01日 08:00

没有更多推荐了,返回首页

不良信息举报

AngularJS-2

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭