zoukankan      html  css  js  c++  java
  • AngularJS form $addControl 注冊控件control

    需求背景:

    在form中使用编写的某component directive时。想通过form's name来对form中控件进行操作,
    如使用$invalid等来ng-disabled btn。

    解决方式

    通过使用form.$addControl将控件中的control注冊到form中,既可使用form's name.xxx.$invalid方式来操作。

    详细方法:

        tw.directive('nameForForm', function() {
          return {
            restrict: 'A',
            require: "?ngModel",
            link: function($scope, elem, attrs, ngModelCtrl) {
              
              var formController = elem.controller('form') || {
                $addControl: angular.noop
              };
              
              ngModelCtrl.$name = attrs.workflowNameForForm;
              formController.$addControl(ngModelCtrl);
    
              $scope.$on('$destroy', function() {
                formController.$removeControl(ngModelCtrl);
              });
    
              return true;
            }
          };
        });

    使用方式:

    component:

    <div class="btn-group select select-block mbn">
      ...
      <input type="text" ng-show="false" ng-model="selectedValue" ng-required="selectRequired" 
          name-for-form="{{nameForForm}}" />
    </div>
    

    注意:在component中引入nameForForm,且scope中加入nameForForm: '@'

    页面使用component:

    <tw-select-list name-for-form="city" ... />


    參考:http://www.ngnice.com/posts/81c1eb92bfbde0

  • 相关阅读:
    SVG的学习(34—36)
    28-30 js 文本全选
    28-30 键盘事件
    react学习(四)之设置 css样式 篇
    跳台阶
    详解Django的CSRF认证
    Django model中数据批量导入bulk_create()
    Redis从入门到精通
    Python的进阶1:copy()与deepcopy()区别
    sql面试题
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/7265639.html
Copyright © 2011-2022 走看看