28angular1两种作用域绑定和两种函数传递

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_30613727

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量100

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10966356.html

版权

一、angular1模块、控制器和作用域的两种绑定方式
注意：模板不必通过ng-app关联到HTML的标签上，也不必通过angular.bootstrap()关联到HTML的标签上!
正常绑定
```html:run
<!DOCTYPE html>
<html ng-app="app">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<div>
    <div ng-controller="myCtrl">
        {{ hello }}
    </div>
</div>
<script type="text/javascript">
    var module = angular.module("app", []);
    module.controller("myCtrl", function ($scope) {
        //app模块的控制器（myCtrl）将作用域的hello 赋值为 "a Angular app"
        $scope.hello = "a Angular app";
    });
</script>
</body>
</html>
```
异常绑定
```html:run
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>

<div id="app1">
    <div ng-controller="myCtrl">
        {{ hello }}
    </div>
</div>

<div id="app2">
    <div ng-controller="myCtrl">
        {{ hello }}
    </div>
</div>

<script type="text/javascript">
    var module1 = angular.module("test1",[]);
    module1.controller("myCtrl",function($scope){
        //test1模块的控制器（myCtrl）将作用域的hello 赋值为 "a Angular app"
        $scope.hello = "a Angular app";
    });
    var module2 = angular.module("test2",[]);
    module2.controller("myCtrl",function($scope){
        //test2模块的控制器（myCtrl）将作用域的hello 赋值为 "a Angular app"
        $scope.hello = " another Angular app";
    });
    /*此方法用于手动加载angularjs模板*/
    angular.bootstrap(document.getElementById("app1"),['test1']);
    /*此方法用于手动加载angularjs模板*/
    angular.bootstrap(document.getElementById("app2"),['test2']);
</script>
</body>
</html>
```
二、两种函数传递
```html:run
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
    <meta charset="UTF-8">
    <title>函数当作变量传进去</title>
</head>
<body ng-controller="myCtrl">
<p ng-click="fnClick()">点击原有标签</p>
<my-text fn="fnClick"></my-text>
<br/>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script>
    var app = angular.module('appModule', []);
    app.controller('myCtrl', function ($scope) {
        $scope.fnClick = function () {
            alert("点击(原有)标签")
        }
    });
    app.directive('myText', function () {
        return {
            restrict: 'E',
            template: '<h1 ng-click="fn()"><span>点击自定义标签</span></h1>',
            scope: {
                fn: '='/*两次弹出“点击(自定义)标签”,原因：(对象)变量引用的内容被更改*/
              /*fn: '&'/!*先后弹出“点击(原有)标签”、“点击(自定义)标签”，原因：函数被重新定义*!/*/
            },
            controller: function ($scope) {
                $scope.fn = function () {
                    alert("点击(自定义)标签")
                }
            }

        }
    })
</script>
</body>
</html>
```
附：复杂函数传递（内容有缺损，仅限作者自己阅读）
```javascript
<dir-pagination config="pagin_init" pagination-config="pagin_config"></dir-pagination>
1、radio.js
  this.page = function (list, total) { // 翻页点击后要进行的操作
      var that = this;
      if (that.all) {
          that.list = true;
          if (!angular.isUndefined(total)) {
              that.total_selected = total - that.removeAllId.length;
              that.cal();
          }
          angular.forEach(list, function (item) {
              var flag = that.operator.check(item[that.id_key], that.removeAllId);
              if (flag.has === '1') {
                  item.custom_checked = false;
                  that.list = false;
              } else {
                  item.custom_checked = true;
              }
          })
      } else {
          that.list = true;
          angular.forEach(list, function (item) {
              var flag = that.operator.check(item[that.id_key], that.allId);
              if (flag.has === '1') {
                  item.custom_checked = true;
              } else {
                  item.custom_checked = false;
                  that.list = false;
              }
          });
          if (list.length < 1) that.list = false;
      };
  }

2、radio-pagin-init.js
(function () {
    angular
        .module('common-serve')
        .service('radioPaginInit', function (radio_m, pagin_config_init) {
            this.init = function (config, scope, type) {
                var type = type || '';
                scope[('check_state' + type)] = new radio_m.init(config.radio);
                scope[('pagin_init' + type)] = new pagin_config_init.init(config.pagin);//获取父作用域的url
                scope[('pagin_init' + type)]['callback'] = function (res) {
                    config.cb(res, scope);//把本作用域的数据赋值给父作用域
                    scope[('check_state' + type)]['page'](scope['list'], res[config.pagin.pagin_key.total]);
                    //相对于4、dir-pagination.js。获取父作用域的方法page，传入父作用域的数据、本作用域的数据，执行结果为：改变父作用域的数据、进而改变父作用域的选中状态。
                }
            }
        });
})(angular);

3、collect-data.js
  radioPaginInit.init({
      radio: {
          id_key: 'pcapId'
      },
      pagin: {
          root: 'datclct',
          url: '/datclct/getinfo',
          pagin_key: {
              page: 'page_current',
              totalPage: 'page_total',
              total: 'datas_total',
          }
      },
      cb: function (res, scope) {
          scope['list'] = res.pcaps;
      }
  }, $scope);

  4、dir-pagination.js
  tradeApi
      .query({
          method: $scope.config.query_method,
          root: $scope.config.query_root,
          url: $scope.config.query_url,
          data: $scope.set_query_params(page_index),
          params: $scope.set_query_params(page_index),
          load: {
              table: function (boolen) {
                  $scope.config.tableload = boolen;
              }
          }
      })
      .then(function (res) {
          $scope.paginationConfig.page = res[$scope.config.pagin_key.page];
          $scope.paginationConfig.totalPage = res[$scope.config.pagin_key.totalPage];
          $scope.paginationConfig.total = res[$scope.config.pagin_key.total];
          if (type === 'reload') {
              dir_tip.set({
                  msg: '刷新成功！'
              })
          }
          $scope.config.callback(res);
      })
```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10966356.html

weixin_30613727

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
28angular1两种作用域绑定和两种函数传递

一、angular1模块、控制器和作用域的两种绑定方式注意：模板不必通过ng-app关联到HTML的标签上，也不必通过angular.bootstrap()关联到HTML的标签上!正常绑定```html:run<!DOCTYPE html><html ng-app="app"><meta http-equiv="Content-Type" content="text/...
复制链接

扫一扫