Передача значения переменной в функцию шаблона директивы angularjs

Я пытаюсь передать переменную $scope в директиву, но ее не работает. Я улавливаю переменную в функции шаблона:

app.directive('customdir', function () {

    return {
        restrict: 'E',

        template: function(element, attrs) {
            console.log(attrs.filterby);
            switch (attrs.filterby) {
                case 'World':
                    return '<input type="checkbox">';
            }
            return '<input type="text" />';
        }
    };
});

Мне нужно значение переменной filterby, а не имя переменной.

Демо-версия Plunkr

Ответ 1

Или как это

app.directive('customdir', function ($compile) {
  var getTemplate = function(filter) {
    switch (filter) {
      case 'World': return '<input type="checkbox" ng-model="filterby">';
      default:  return '<input type="text" ng-model="filterby" />';
    }
  }

    return {
        restrict: 'E',
        scope: {
          filterby: "="
        },
        link: function(scope, element, attrs) {
            var el = $compile(getTemplate(scope.filterby))(scope);
            element.replaceWith(el);
        }
    };
});

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

Ответ 2

Шаблон не должен содержать логику, потому что шаблон view. Шаблон должен содержать только директивы привязки, чтобы обновить представление на основе изменений области (модель). Что-то вроде этого:

app.directive('customdir', function ($compile) {

    return {
        restrict: 'E',

        scope:{
          filterby:"="
        },

        link:function (scope, element) {
          scope.$watch("filterby",function(newValue){ //logic is out of template
              if (newValue == "World"){
                scope.showCheckBox = true;
              }
              else {
                scope.showCheckBox = false;
              }
          });
        },

        template: function(element, attrs) {
         //View should be passive and only listens to changes of model to update it accordingly.
            return '<input type="checkbox" ng-show="showCheckBox" / ><input type="text" ng-show="!showCheckBox"  />'; 
        }
    };
});

При таком подходе вы даже можете изменить ввод во время выполнения, и представление обновится, чтобы отразить изменения.

DEMO

Если вы хотите принять решение о том, какой шаблон использовать на основе какой-либо конфигурации, вы должны настроить его с помощью нормального свойства, не должны получить доступ, хотя с учетом его возможностей. Просто так:

app.directive('customdir', function ($compile) {

    return {
        restrict: 'E',
        scope: {
            filterby:"=" //filterby is a separate field used for data binding
        },

        template: function(element, attrs) {
            switch (attrs.type) { //view selection configuration should be obtained from the element
                case 'checkbox':
                    return '<input type="checkbox">';
            }
            return '<input type="text" />';
        }
    };
});

Настройте его, передав нормальное значение:

<customdir type="checkbox" filterby="name"></customdir>

DEMO

Ответ 3

Прежде всего, что такое функция template? Это должна быть функция link. Во-вторых, вы неправильно перегружаете функцию связи, делайте заказ здесь, всегда scope, element, attrs. Третье, передайте переменную в области выделения:

app.directive('customdir', function ($compile) {

    return {
        restrict: 'E',
        scope:{
          filterby:'='
        },

        link: function(scope,element, attrs) {
            console.log(scope.filterby);
            switch (scope.filterby) {
                case 'World':
                    return '<input type="checkbox">';
            }
            return '<input type="text" />';
        }
    };
});

или если вы настаиваете на атрибутах, то:

 app.directive('customdir', function ($compile) {

        return {
            restrict: 'E',

            link: function(scope,element, attrs) {
                console.log(attrs.filterby);
                switch (attrs.filterby) {
                    case 'World':
                        return '<input type="checkbox">';
                }
                return '<input type="text" />';
            }
        };
    });

но в вашем html:

 <customdir filterby="{{name}}"></customdir>

Чтобы сначала оценить значение переменных. Наконец, вы не должны манипулировать DOM, как это, на самом деле, что функция ссылки не будет отображать html, как вы ожидали. У вас есть статический шаблон, и ваша функция ссылок будет действовать как что-то, чтобы установить значения переменных в шаблоне.