如何通過範圍變量在屬性

中傳遞templateUrl我想通過範圍變量傳遞模板的url。範圍不會改變，因此模板不需要根據它進行更新，但目前範圍變量始終未定義。如何通過範圍變量在屬性

<div cell-item template="{{col.CellTemplate}}"></div>

理想情況下，指令是：

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      scope: { 
       template: '@template' 
      }, 
      templateUrl: template // or {{template}} - either way 
     }; 
    }])

然而，這並不工作。我已經嘗試了很多不同的排列方式來完成相同的概念，而這看起來是最接近的，但它仍然不起作用。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      scope: { 
       template: '@template' 
      }, 
      link: function (scope, element, attrs) { 
       var templateUrl = $parse(attrs.template)(scope); 
       $http.get(templateUrl, { cache: $templateCache }).success(function (tplContent) { 
        element.replaceWith($compile(tplContent)(scope)); 
       }); 
      } 
     }; 
    }])

我也試過使用ng-include，但是在編譯之前也沒有計算範圍變量。 CellTemplate值來自數據庫調用，因此在評估之前完全未知。任何建議，以獲得這項工作將不勝感激！

編輯：我使用的角度爲1.0.8，我無法升級到更新的版本。

來源

2013-10-21 John

你根本不在遙遠的地方。

您不需要爲指令使用隔離範圍。您可以通過templateUrl這樣的：

<div cell-item template="col.CellTemplate"></div>

然後添加一個手錶，以檢測當模板值改變：如果你不http://plnkr.co/edit/n20Sxq?p=preview

來源

2013-10-21 19:54:31 tasseKATT

當數據被預定義時，這肯定會起作用。我沒有意識到我的問題是因爲我從服務中獲取數據。如果你設置的數據超時說，它會卡住： http://plnkr.co/edit/aLkCRm – John

對約翰的誤解抱歉。我使用更新的代碼編輯了我的答案，並使用了一個與超時一起工作的新Plunker。 – tasseKATT

這個技巧！謝謝噸 – John

：

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      restrict: 'A', 
      link: function(scope , element, attrs) { 

       scope.$watch(attrs.template, function (value) { 
       if (value) { 
        loadTemplate(value); 
       } 
       }); 

       function loadTemplate(template) { 
        $http.get(template, { cache: $templateCache }) 
        .success(function(templateContent) { 
         element.replaceWith($compile(templateContent)(scope));     
        });  
       } 
      } 
     } 
    }]);

這裏是一個工作Plunker想要自己處理鏈接邏輯，或者你想要隔離範圍，我認爲這更簡單：

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
     return { 
      scope: { 
       template: '@template' 
      }, 
      template: "<div ng-include='template'></div>" 
     }; 
    }])

或：

template:"<ng-include src='template'></ng-include>"

來源

2014-09-09 19:56:22 npjohns

templateUrl是有原因的 – caub

這是一個老的文章，但我想它的有用的，如果有人在這裏登陸的答案。

您可以在評論中提到的@caub中嘗試使用templateUrl函數。同樣也可以用於組件。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) { 
    return { 
     templateUrl: function(element, attrs) { 
      return attrs.template || 'someDefaultFallback.html'; 
     } 
    }; 
}]);

這裏我們不需要任何注入的依賴關係。希望這可以幫助某人。

來源

2016-10-14 21:22:21 Vinay

如何通過範圍變量在屬性

回答

相關問題