Angular 1.5 Custom directive to Component

问题

I've upgraded to Angular 1.5 which now supports the .component() helper method in the efforts to help users transition to AngularJs 2. Unfortunately there are not many tutorials out there on it. I have the following simplified custom directive and template URL. Can anyone help me write this in .component() form? By doing this I should get the basics of it and and should be able to use it for more complex directives. Thanks in advance.

DIRECTIVE

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
}])

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

回答1:

directive to component conversion code will look like below.

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
    }
}])

Template

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

I'd recommend you to go through this article by Todd Motto

来源：https://stackoverflow.com/questions/35475660/angular-1-5-custom-directive-to-component