將變量的值傳遞給angularjs指令模板函數

Question

我試圖將$ 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演示

Answer 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

Answer 2

模板不應包含邏輯，因為模板是視圖 。 模板應該只包含綁定指令，以根據范圍（ 模型 ）的更改使視圖更新。 像這樣的東西：

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

Answer 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。 您有一個靜態模板，您的鏈接函數將充當在模板上設置變量值的東西。