7 篇笔记 写笔记

1. #0

   不爱学习的小孩

   209***[email protected]

   5

   Angular的很多服务,在DOM中有对应的对象,那为什么不使用这些对象,而是要用服务呢?

   因为这些服务可以获取到Angular应用声明周期的每一个阶段,并且和$watch整合,让Angular可以监控应用,处理事件变化。普通的DOM对象则不能在Angular应用声明周期中和应用整合。

   不爱学习的小孩

   209***[email protected]

   9年前 (2017年03月06日)
2. #0

   不爱学习的小孩

   209***[email protected]

   4

   以下代码是不使用 $interval 服务的情况下,运用 $apply,实现每一秒显示信息的功能。

   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
    $scope.theTime = new Date().toLocaleTimeString();
    $scope.setTime = function() {
    // $apply 方法可以修改数据
    $scope.$apply(function() {
    $scope.theTime = new Date().toLocaleTimeString();
    });
    };
    setInterval($scope.setTime, 1000);
   });
   

   尝试一下 »

   不爱学习的小孩

   209***[email protected]

   9年前 (2017年03月13日)
3. #0

   不爱学习的小孩

   209***[email protected]

   4

   $watch:持续监听数据上的变化,更新界面,如:

   <div ng-app="myApp" ng-controller="myCtrl">
    <b>请输入姓名:</b><br>
    <b>姓:</b><input type="text" ng-model="lastName"><br>
    <b>名:</b><input type="text" ng-model="firstName"><br>
    <h1>{{ lastName + " " + firstName }}</h1>
    <h2>{{ fullName }}</h2>
   </div>
   <script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
    $scope.lastName = "";
    $scope.firstName = "";
    //监听lastName的变化,更新fullName
    $scope.$watch('lastName', function() {
    $scope.fullName = $scope.lastName + " " + $scope.firstName;
    });
    //监听firstName的变化,更新fullName
    $scope.$watch('firstName', function() {
    $scope.fullName = $scope.lastName + " " + $scope.firstName;
    });
   });
   </script>
   

   尝试一下 »

   不爱学习的小孩

   209***[email protected]

   9年前 (2017年03月13日)
4. #0

   wzj

   139***[email protected]

   1

   $timeout 可用于设置单次或多次延时服务;

   $interval 可用于设置始终运行的延时服务。

   wzj

   139***[email protected]

   9年前 (2017年07月11日)
5. #0

   Sam Lin

   lin***[email protected]

   5

   如果通过$watch去监听某变量的变化,最后去更新一个fullName就太麻烦了,还倒不如使用函数的方式,如getFullName():

   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
    $scope.lastName = "";
    $scope.firstName = "";
    $scope.getFullName =function(){ return $scope.lastName + " " + $scope.firstName;}
    
    //监听lastName的变化,更新fullName
    $scope.$watch('lastName', function() {
    $scope.fullName = $scope.lastName + " " + $scope.firstName;
    });
    //监听firstName的变化,更新fullName
    $scope.$watch('firstName', function() {
    $scope.fullName = $scope.lastName + " " + $scope.firstName;
    });
    
   });
   

   尝试一下 »

   Sam Lin

   lin***[email protected]

   9年前 (2017年07月13日)
6. #0

   热爱前端

   107***[email protected]

   2

   全局函数注册:方法一

   // 注册全局服务(即变量)myService 可以向其添加一些全局使用的函数
   app.service('myService', [function () {
    this.myFunc = function(str){
    return str.split('').reverse().join('');
    }
   }]);
   // 向某个控制器传入全局服务对象,此控制器作用域中可调用全局服务对象的方法
   app.controller('serviceCtrl',function($scope,myService){
    $scope.str = '';
    $scope.outputFunc = myService.myFunc;
   });

   全局函数注册:方法二

   <p ng-controller='father'>
    <span ng-controller='son'>
    {{father()}}
    </span>
   </p>
   // 在顶层控制器中注册方法 子控制器都可以使用
   app.controller('father',function($scope){
    $scope.father = function(){
    return 'I am father';
    }
   });
   app.controller('son',function($scope){
    // 随便写,别覆盖了父级的方法就行
   })

   热爱前端

   107***[email protected]

   9年前 (2017年09月09日)
7. #0

   快乐菠菜

   593***[email protected]

   11

   controller 有两种写法,讨论一下两种写法的区别:

   写法 1:

   app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
   });

   写法2:

   app.controller('myCtrl', ["$scope","$location",function($scope,$location) {
    $scope.myUrl = $location.absUrl();
   }]);

   两种写法都是对的,但是推荐第二种写法,因为第一种写法在 js 压缩后会出问题,而第二种写法可以完美应对 js 压缩,原因是:js 压缩后,变量名会重命名,故第一种写法会报错。

   上面的例子第 2 种写法还可以这样:

   app.controller('myCtrl', ["$scope","$location",function(a, b) {
    a.myUrl = b.absUrl();
   }]);

   快乐菠菜

   快乐菠菜

   593***[email protected]

   8年前 (2018年06月20日)