angularjs – Angular 1.5 Custom指令到Component

发布时间：2020-12-17 17:25:57 所属栏目：安全来源：网络整理

导读：我已经升级到Angular 1.5,它现在支持.component()帮助器方法,以帮助用户过渡到AngularJs 2.不幸的是,它上面没有很多教程.我有以下简化的自定义指令和模板URL.任何人都可以帮我写.component()形式吗？通过这样做,我应该得到它的基础知识,并且应该能够将它用于

我已经升级到Angular 1.5,它现在支持.component()帮助器方法,以帮助用户过渡到AngularJs 2.不幸的是,它上面没有很多教程.我有以下简化的自定义指令和模板URL.任何人都可以帮我写.component()形式吗？通过这样做,我应该得到它的基础知识,并且应该能够将它用于更复杂的指令.提前致谢.

指示

angular.module("formText",[])
.directive("formText",['$http','formService','$mdDialog',function($http,formService,$mdDialog){

    return{

                scope:{headId:'&',view:'='},link: function(scope,element,attrs){ 
                    scope.show = false;
                    scope.formService = formService;

                    scope.$watch('formService',function(newVal) {
                        scope.content = formService.getContent();                       
                    });
                },restrict:"E",replace:true,templateUrl:"partials/form/tpl/element/text.html",transclude:true
            }//return
}])

模板URL

<div layout='column' flex>
     <md-input-container class="md-block" ng-if="view=='DRAFT'">
        <label>{{label()}}</label>
        <textarea style="border-bottom-color:#FFFFFF;" ng-model="content.value" columns="1" ></textarea>
      </md-input-container>
      <md-input-container class="md-block" ng-if="view=='READ'">
        <label>{{label()}}</label>
        <textarea style="border-bottom-color:#FFFFFF;" ng-model="content.value" columns="1" readonly></textarea>
      </md-input-container>
      <ng-transclude></ng-transclude>
</div>

解决方法

组件转换代码的指令如下所示.

angular.module("formText",[])
.component("formText",[function() {
    return {
      //bindings will bind all values to directive context       
      bindings: {
        headId: '&',view: '='
      },//link fn is deprecated now
      controller: function(formService,$element) {
        //but not sure how to do DOM manipulation,//you could have $element for play with DOM
        var vm =this;
        vm.show = false;
        vm.formService = formService;
        vm.$watch(function(formService){ return formService},function(newVal) {
          vm.content = formService.getContent();
        });
      },controllerAs: 'vm',//restrict: "E",//by default component will E
      //replace: true,//this has been deprecated
      templateUrl: "partials/form/tpl/element/text.html",transclude: true
    }
}])

模板

<div layout='column' flex>
     <md-input-container class="md-block" ng-if="vm.view=='DRAFT'">
        <label>{{vm.label()}}</label>
        <textarea style="border-bottom-color:#FFFFFF;" ng-model="vm.content.value" columns="1" ></textarea>
      </md-input-container>
      <md-input-container class="md-block" ng-if="vm.view=='READ'">
        <label>{{vm.label()}}</label>
        <textarea style="border-bottom-color:#FFFFFF;" ng-model="vm.content.value" columns="1" readonly></textarea>
      </md-input-container>
      <ng-transclude></ng-transclude>
</div>

我建议你通过Todd Motto的this article

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!