Angular 1.5组件方法templateUrl+函数

Angular 1.5 component method templateUrl + function

本文关键字：templateUrl+ 函数 方法 组件 Angular      更新时间：2023-09-26

我正在尝试让一个应用程序与angular 1.5.0-beta 2 一起工作

要做出"指令"，我有以下代码：

myApp.component('gridshow', {
  bindings: {
    slides: '='
  },
  controller: function() {
  },
  controllerAs: 'grid',
  template: function ($element, $attrs) {
    // access to $element and $attrs
    return [
      '<div class="slidegrid">',
      '<div ng-repeat="slide in grid.slides">',
      '{{slide.image}}',
      '</div>',
      '</div>'
    ].join('')
  }
});

我喜欢模板返回一个可以访问$element和$attrs的函数的想法，但我如何将其与templateUrl组合？

在1.5.0-beta 2中，templateUrl可以是一个由注入器调用的函数。$element和$attrs被注入到component中的template和templateUrl函数以及任何其他依赖项中。

这意味着

  ...
  templateUrl: function ($element, $attrs) {
    // access to $element and $attrs
    ...
    return $attrs.uninterpolatedTemplateUrl;
  }

可以取而代之。

我通过以下技术解决了这个问题。这可能会对你有所帮助。

模板

<div data-ng-repeat="field in $ctrl.fields track by $index">
  <render-field data-field-type="{{field.type}}"></render-field>
</div>

组件

/**
 * @ngdoc Component
 * @name app.component.renderField
 * @module app
 *
 * @description
 * A component to render Field by type
 *
 * @author Mohan Singh ( gmail::mslogicmaster@gmail.com, skype :: mohan.singh42 )
 */
(function () {
  'use strict';
  angular
    .module('app')
    .component('renderField', {
      bindings: {
        fieldType: '@',
      },
      template: '<div ng-include="$ctrl.templateUrl">',
      controller: [
        function () {
          var $ctrl = this;
          $ctrl.$onInit = initialization;
          $ctrl.$onDestroy = onDestroy;
          $ctrl.$onChanges = onChanges;
          /**
           * public properties
           */
          /**
           * public methods
           */
          /**
           * @function
           * @name initialization
           * @description
           * A component's lifeCycle hook which is called after all the controllers on an element have been constructed and had their bindings initialized
           */
          function initialization() {
          }
          /**
           * @function
           * @name onChanges
           * @description
           * A component's lifeCycle hook which is called when bindings are updated.
           */
          function onChanges(bindings) {
            if(bindings.fieldType && bindings.fieldType.isFirstChange()){
              //$ctrl.fieldType['text' | 'textarea' | 'select' | 'radio']
              $ctrl.templateUrl = 'partials/fields/'+$ctrl.fieldType+'.html';
            }
          }
          /**
           * @function
           * @name onDestroy
           * @description
           * A component's lifeCycle hook which is called when is called on a controller when its containing scope is destroyed. 
           * Usefull to release external resources, watches and event handlers.
           */
          function onDestroy() { }
        }]
    });
})();

@estus解决方案一直适用于我，直到我改进了我的脚本。未经验证，出现以下错误：

Error: [$injector:unpr] Unknown provider: eProvider <- e

对我有效的解决方案是：

['$element', '$attrs', function($element, $attrs) {
    return $attrs.uninterpolatedTemplateUrl;
}]
相关文章：