AngularJS实例,Angular,AngularJS 在线

730AngularJS Service

全局函数注册:方法一

// 注册全局服务(即变量)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){
    // 随便写,别覆盖了父级的方法就行
})

729AngularJS 服务(Service)

如果通过$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;
   });
   
});

尝试一下 »

728AngularJS Service

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

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

727AngularJS Service

$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>

尝试一下 »

726AngularJS Service

以下代码是不使用 $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);
});

尝试一下 »