组件的Angular 1.5自定义指令 [英] Angular 1.5 Custom directive to Component

问题描述

我已经升级到Angular 1.5，该版本现在支持.component() helper方法，以帮助用户过渡到AngularJs2.不幸的是，这里没有太多的教程.我有以下简化的自定义指令和模板URL.有人可以帮我用.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.

指令

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>

推荐答案

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

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

模板

<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

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

这篇关于组件的Angular 1.5自定义指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！