AngularJs入门

最新推荐文章于 2019-02-27 09:01:45 发布

景叁

最新推荐文章于 2019-02-27 09:01:45 发布

阅读量684

点赞数

分类专栏：【AngularJS: Up & Running学习笔记】文章标签： angularjs

本文链接：https://blog.csdn.net/R3lish/article/details/52608173

版权

【AngularJS: Up & Running学习笔记】专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1 $scope（作用于一个Controller）与$rootScope（全局）的作用域区别

2 特殊变量名（如：$scope,$rootScope）在js压缩（类似Android的代码混淆）过程中避免被替换而报错的解决方案

原：app.controller('secondController', function ($scope, $rootScope) { $scope.name = '李四'; $rootScope.age = '30'; });
改：app.controller('firstController', ['$scope', function ($s) {……}]);

3 无controller的数据进行绑定

3.1 方案1：app.run()

{{sex}}

    var app = angular.module("myApp", []);
    app.run(['$rootScope',function ($rootScope) {
        $rootScope.sex = '男';
    }]);

3.2 方案2:直接在其他controller中使用$rootScope

run方法初始化全局的数据，只对全局作用域起作用

    var app = angular.module("myApp", []);
    app.controller('secondController', function ($scope, $rootScope) {
        $scope.name = '李四';
        $rootScope.sex = '男';
    });

4 $scope中的$apply、$timeout、$watch方法

4.1 $apply

作用:通知界面（View）数据（Model）的变化(类似Android中列表控件的notifyDataChanged())

    // 2s后“张三”变成“李四”
    var app = angular.module("myApp", []);
    app.controller('firstController', function ($scope) {
        $scope.name = '张三';
        setTimeout(function () {
            $scope.$apply(function () {
                $scope.name = '李四';
            });
        },2000);
    });

4.2 timeout的另一种用法：

    // 2s后“10”变成“20”
    app.controller('firstController', function ($scope, $timeout) {
        $scope.age = '10';
        $timeout(function () {
            $scope.age = '20';
        },2000);
    });

4.3 ng-click=”show();”的使用

声明：

    $scope.show = function () {
        alert('李四');
        $scope.name = '点击后的李四';
    }

调用：

<div ng-controller="firstController" ng-click="show();">
    {{name}}
</div>

4.3 $watch

用于监听某个数值的变化（类似Android的TextWatcher）

//当总价>=100，运费为0；否则为￥10.
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="../lib/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="CartController">
        <p>价格:<input type="number" ng-model="iphone.money"></p>
        <p>个数:<input type="number" ng-model="iphone.num"></p>
        <p>费用:<span>{{ sum() | currency:'￥' }}</span></p>
        <p>运费:<span>{{iphone.fre | currency:'￥'}}</span></p>
        <p>总额:<span>{{ sum() + iphone.fre | currency:'￥'}}</span></p>
    </div>
</div>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller('CartController', function ($scope) {
        $scope.iphone = {
            money: 5,
            num: 1,
            fre: 10
        };
        $scope.sum = function () {
            return $scope.iphone.money * $scope.iphone.num;
        };
        //当总价>=100，运费为0；否则为￥10.
        $scope.$watch($scope.sum, function (newVal, oldVal) {
            console.log("newVal = " + newVal);
            console.log("oldVal = " + oldVal);
            $scope.iphone.fre = newVal >= 100 ? 0 : 10;
        });
    });
</script>
</body>
</html>

景叁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs入门

1 $scope（作用于一个Controller）与$rootScope（全局）的作用域区别2 特殊变量名（如：$scope,$rootScope）在js压缩（类似Android的代码混淆）过程中避免被替换而报错的解决方案原：app.controller('secondController', function ($scope, $rootScope) { $scope.n
复制链接

扫一扫

专栏目录