AngularJS — другой шаблон в директиве

У меня есть форма на основе twitter bootstrap, каждое поле имеет свою конфигурацию

// controller (the template shows this in ng-repeat

$scope.fields = [{name:"f1", label:"Field 1", with_button: false},
                 {name:"f2", label:"Field 2", with_button: true}]

Я пытаюсь сделать «условную директиву», которая настраивает шаблон в соответствии с «field.with_button».

// Without button
<div class="controls">
    <input type="text" id="i_{{field.name}}">
</div>

// With button
<div class="controls">
    <div class="input-append">
        <input type="text" id="i_{{field.name}}">
        <span class="add-on">bt</span>
    </div>
</div>

Я много искал и не нашел решения, я пытался создать только один div и поместить содержимое внутрь с помощью функции компилятора, но он не анализировался, и если я вызываю $apply, он вылетает.

Как я мог сделать эту директиву?

неправильно Моя последняя попытка:

angular.module('mymodule',[]).directive('ssField', function() {
    return {
        transclude:false,
        scope: {
            field: '='
        },
        restrict: 'E',
        replace:true,
        template: '<div class="controls">{{innerContent}}</div>',
        controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
            $scope.$eval('$scope.innerContent = \'<input type="text" id="input_{{field.name}}" placeholder="{{field.name}}" class="input-xlarge">\'');
        }]
    };
});

//<ss-field field="{{field}}"></ss-field>

angularjs angularjs-directive angularjs-ng-repeat
person Giovanne Afonso    schedule 04.07.2013    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Вы можете использовать службы $http и $compile, чтобы делать то, что вам нужно.

http://plnkr.co/edit/Xt9khe?p=preview

Этот plnkr должен продемонстрировать, что нужно сделать, но в основном:

  1. Используйте $http для загрузки шаблона в зависимости от условия.
  2. Скомпилируйте загруженный шаблон для текущей области с помощью $compile.
angular.module('mymodule',[]).directive('ssField', ['$http', '$compile', function($http, $compile) {
    return {
        transclude:false,
        scope: {
            field: '='
        },
        restrict: 'E',
        replace:true,
        template: '<div class="controls"></div>',
        link: function(scope, element, attrs) {
          var template;
          var withButtonTmpl = 'with_button.html';
          var withoutButtonTmpl = 'without_button.html';

          if (scope.field.with_button) {
            $http.get(withButtonTmpl).then(function(tmpl) {
              template = $compile(tmpl.data)(scope);
              element.append(template);
            });
          } else {
            $http.get(withoutButtonTmpl).then(function(tmpl) {
              template = $compile(tmpl.data)(scope);
              element.append(template);
            });
          }
        }
    };
}]);

Вы можете изменить директиву, чтобы сделать ее более надежной, чтобы URL-адреса не были напрямую встроены в директиву для повторного использования и т. д., но концепция должна быть аналогичной.

person Cuong Vo    schedule 04.07.2013
comment
это не перебор? Как насчет загрузки шаблона с некоторыми ng-if?? - person Mirko; 25.11.2014

arrow_upward
2
arrow_downward

Чтобы еще больше расширить ответ Cuing Vo, вот что-то похожее на то, что я использую (без использования внешних частей и дополнительных вызовов $http):

http://jsfiddle.net/LvUdQ/

myApp.directive('myDirective',['$compile', function($compile) {
    return {
        restrict: 'E',

        template: '<hr/>',
        link: function (scope, element, attrs, ngModelCtrl) {
            var template = {
                'templ1':'<div>Template 1</div>',
                'templ2':'<div>Template 2</div>',
                'default':'<div>Template Default</div>'
            };
            var templateObj;
            if(attrs.templateName){
                templateObj = $compile(template[attrs.templateName])(scope);
            }else{
                templateObj = $compile(template['default'])(scope);
            }
            element.append(templateObj);
        }    
    };
}]);

Однако я не совсем уверен, что это библия с точки зрения производительности.

person Tsonev    schedule 21.03.2014

arrow_upward
1
arrow_downward

В AngularJS прямое управление DOM должно быть только последним средством. Здесь вы можете просто использовать директиву ngSwitch:

angular.module('mymodule',[]).directive('ssField', function() {
    return {
        transclude:false,
        scope: {
            field: '='
        },
        restrict: 'E',
        replace:true,
        template:
            '<div class="controls" data-ng-switch="field.with_button">' +
                '<input type="text" id="i_{{field.name}}" data-ng-switch-when="false">' +
                '<div class="input-append" data-ng-switch-default>' +
                    '<input type="text" id="i_{{field.name}}">' +
                    '<span class="add-on">bt</span>' +
                '</div>' +
            '</div>',
    };
});
person Blackhole    schedule 04.07.2013
comment
Мне это нравится больше, чем делать новый http-запрос для каждого шаблона. - person Mirko; 25.11.2014