计算机教程

当前位置:3522.com > 计算机教程 > bootstrap angularjs seajs构建Web Form前端2

bootstrap angularjs seajs构建Web Form前端2

来源:http://www.4sports-uk.com 作者:3522.com 时间:2019-06-29 18:10

  但是我们用以上的结构后,会出现RangeError: Maximum call stack size exceeded的异常,这是由于编译过程当中并不会判断children是否有效才进行生成的,因此就成了一个无限循环了。那么只能再将节点的生成拆分出另一个指令,然后再内部进行判断,当存在子节点的时候生成子节点,不存在的情况下只生成<a>的内容,代码如下:

  list指向Controller内的$scope.list,而m in list类似于foreach(var m in list)。但是使用以上的代码得到的却只是根节点而已,如果才能遍历节点的时候也遍历它的子节点呢?


  这样实现了ng版的ajax form了,相对于jQuery.form的方式,ng版本的代码多一些但是只要抽取一个库就简单多了。

    restrict:表示如何识别该指令(E:元素名 A:属性 C:class M:注释)

构建菜单

<formname="frmLogin"class="col-sm-offset-4 col-sm-4"role="form"ng-controller="HomeLoginController"ng-submit="submit()"><inputtype="text"class="form-control input-lg"placeholder="用户名"requiredautofocusng-model="formData.name"/><inputtype="password"class="form-control input-lg"placeholder="密码"requiredng-model="formData.password"/><buttonclass="btn-lg btn-primary btn-block"type="submit">登录</button></form>

回顾

  list指向Controller内的$scope.list,而m in list类似于foreach(var m in list)。但是使用以上的代码得到的却只是根节点而已,如果才能遍历节点的时候也遍历它的子节点呢?

  • data参数是不能像jQuery那样直接使用json对象的(jQuery内部会将其转化成QueryString,即a=b&c=d的格式),如果使用json对象后台将无法取到表单内的任何值
  • headers必须指定'Content-Type': 'application/x-www-form-urlencoded',否则无法识别为表单数据,跟上一点一样的结果

  要实现以上的tree首先要认识ng的几个指令(directive),首先是第一篇用到的ngRepeat,这个指令简单的说就是对包含的HTML以模板的方式进行循环,循环体则为指定的数据源,代码如下:

//html
<ul>
    <es-tree data="list"><es-tree>
</ul>

//js
angular.module('es.tree', []).directive('esTree', function () {
    return {
        replace: true,
        restrict: 'E',
        scope: {
            data: '='
        },
        template: [
            '<li ng-repeat="m in data">',
            '   <a href="#" ng-bind="m.name"></a>',
            '   <ul>',
            '       <es-tree data="m.children"></es-tree>',
            '   </ul>',
            '</li>',
        ].join('')
    };
});

  1、实现ajax form

  图片 1

  完成绑定以后,当我么对input进行操作的时候,变化的值就会同步到formData中,反过来也是一样的。

  但是我们用以上的结构后,会出现RangeError: Maximum call stack size exceeded的异常,这是由于编译过程当中并不会判断children是否有效才进行生成的,因此就成了一个无限循环了。那么只能再将节点的生成拆分出另一个指令,然后再内部进行判断,当存在子节点的时候生成子节点,不存在的情况下只生成<a>的内容,代码如下:

<ulng-repeat="m in list"><ling-bind="m.name"></li></ul>

  由于ng没有提供将对象转化为QueryString格式的函数,但是jQuery提供了,因此可以使用jQuery.Param,但是ng提供的ajax的优点是,如果返回的是json字符串,它会默认转成json对象,代码如下:

 

    replace:表示template或templateUrl内的html是否替换指令元素(<es-tree>)

  上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使ng手动启动。我会尽量把自己在学习当中遇到的问题以及如何解决分享给各位,如果大家有什么疑问或者想要达到的功能可以告诉我,我可以尝试去把效果做出来然后再下一篇文章分享给各位。

  其余的说明清查看API如果有不清楚的,可以给我留言,^_^。template使用数组只是为了排版好看而已,没有其他意思。

  • data参数是不能像jQuery那样直接使用json对象的(jQuery内部会将其转化成QueryString,即a=b&c=d的格式),如果使用json对象后台将无法取到表单内的任何值
  • headers必须指定'Content-Type': 'application/x-www-form-urlencoded',否则无法识别为表单数据,跟上一点一样的结果
<form name="frmLogin" class="col-sm-offset-4 col-sm-4" role="form" ng-controller="HomeLoginController" ng-submit="submit()">
    <input type="text" class="form-control input-lg" placeholder="用户名" required autofocus ng-model="formData.name" />
    <input type="password" class="form-control input-lg" placeholder="密码" required ng-model="formData.password" />
    <button class="btn-lg btn-primary btn-block" type="submit">登录</button>

</form>

分类: C#, Javascript, mvc

  由于ng提供给的指令无法实现以上的要求,那么只有自己自定义指令去完成这个功能了,自定义指令要在注册模块的时候调用directive来注册自定义的指令(官方API好不容易找到该方法的说明却在$compile内),注意命名依然是camelCase命名法,按照最初的想法在第一层ngRepeat内再嵌入自定义的指令并将数据指向children,代码如下:

 

  要实现以上的tree首先要认识ng的几个指令(directive),首先是第一篇用到的ngRepeat,这个指令简单的说就是对包含的HTML以模板的方式进行循环,循环体则为指定的数据源,代码如下:

//html<ul><es-tree data="list"><es-tree></ul>    //js  angular.module('es.tree',[]).directive('esTree',function(){return{          replace:true,          restrict:'E',          scope:{              data:'='},template:['<li ng-repeat="m in data">','   <a   ng-bind="m.name"></a>','   <ul>','       <es-tree data="m.children"></es-tree>','   </ul>','</li>',].join('')};});

实现ajax form

//esTreetemplate:['<li ng-repeat="m in data">','   <es-tree-node data="m"></es-tree-node>','</li>',].join('')//节点指令  directive('esTreeNode',function($compile){return{          link:function($scope, $element, $attrs){var data = $scope.data;vartemplate=['<a   ng-bind="data.name"></a>'];if(data.children && data.children.length){template.push('<ul>','   <es-tree data="data.children"></es-tree>','</ul>');}var html = $compile(template.join(''))($scope);              $element.replaceWith(html);},          restrict:'E',          scope:{              data:'='}};});

  完成绑定以后,当我么对input进行操作的时候,变化的值就会同步到formData中,反过来也是一样的。

bootstrap angularjs seajs构建Web Form前端(二)

//其他省略

//esTree
<a href="#" ng-class="{ selected: data.selected }" ng-bind="data.name" ng-click="select(data)"></a>

//controller
controller('esTreeController', function ($scope) {
    $scope.select = function (m) {
        if ($scope.$root.selectedNode)
            $scope.$root.selectedNode.selected = 0;

        m.selected = 1;
        $scope.$root.selectedNode = m;
    };
})

  由于ng提供给的指令无法实现以上的要求,那么只有自己自定义指令去完成这个功能了,自定义指令要在注册模块的时候调用directive来注册自定义的指令(官方API好不容易找到该方法的说明却在$compile内),注意命名依然是camelCase命名法,按照最初的想法在第一层ngRepeat内再嵌入自定义的指令并将数据指向children,代码如下:

$scope.submit = function () {
    $http.post('/mvc/Home/Login', $.param($scope.formData), {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).success(function (data) {
        $scope.responseCode = data.code;

        //1s后让错误消息隐藏
        $timeout(function () {
            $scope.responseCode = 0;
        }, 1000);
    });
};

  以上directive方法返回对象的属性说明如下:

  如果要绑定某些事件呢,类似于easyui提供的onSelect这样的函数呢,其实原理跟data是一样的,那么这里就不再阐述了,文章就到这里了,如果有什么错误请支持,谢谢!

    template:该指令所编译成的html

  接下来要使用一个类似jQuery.ajax的函数,在ng中叫做$http(nodejs中也是http),对于这个对象详细的介绍可以查看API,它一样提供了名为post的函数来实现ajax的交互,我们可以使用原来的ngClick方法来实现ajax,但是这样便没有办法让表单进行验证了,因此这里使用ngSubmit绑定在form表单上,然后将登录按钮类型改为submit,那么当表单有效的情况下,点击按钮就会触发ngSubmit的函数了,然后将原来的alerts删除,并加上根据后台返回的代码显示不同信息的提示信息,代码如下:

$scope.submit =function(){      $http.post('/mvc/Home/Login', $.param($scope.formData),{          headers:{'Content-Type':'application/x-www-form-urlencoded'}}).success(function(data){          $scope.responseCode = data.code;//1s后让错误消息隐藏          $timeout(function(){              $scope.responseCode =0;},1000);});};

  然后改造submit函数来实现ajax form,但是这里需要注意的是ng提供的ajax跟jQuery的ajax有一些区别,需要注意如下两点:

  如果要绑定某些事件呢,类似于easyui提供的onSelect这样的函数呢,其实原理跟data是一样的,那么这里就不再阐述了,文章就到这里了,如果有什么错误请支持,谢谢!

  上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使ng手动启动。我会尽量把自己在学习当中遇到的问题以及如何解决分享给各位,如果大家有什么疑问或者想要达到的功能可以告诉我,我可以尝试去把效果做出来然后再下一篇文章分享给各位。

本文由3522.com发布于计算机教程,转载请注明出处:bootstrap angularjs seajs构建Web Form前端2

关键词: 3522.com

上一篇:dedecms install/index.php.bak3522.com

下一篇:没有了