组件的Angular 1.5 Custom指令

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

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

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 撰写的这篇文章