Angular 1.5 组件的自定义指令

Question

我已经升级到 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
}])

模板网址

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

Answer 1

directive 到 component 的转换代码如下所示。

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