ng-include與ng-src不起作用

Question

我正在編譯一個模板，它已經定義了data-ng-include和data-ng-src。我試圖通過調用getPartial()來設置src，它返回模板的路徑。但getPartial()沒有被調用。

HTML：

<button ng-click="displayElements();">Display Elements</button> 
<div id="container"></div> 

JS：

$scope.displayElements = function() { 
    var template = '<div data-ng-include data-ng-src="getPartial()"></div>'; 
    var linkFn = $compile(template)($scope); 
    //console.log(angular.element(document.getElementById("container"))); 
    angular.element(document.getElementById("container")).append(linkFn); 
} 

$scope.getPartial = function() { 
    console.log("from partial"); 
    return 'hello.html'; 
} 

Plnkr：http://plnkr.co/edit/ig9TAXVpK4k1bQwi9PQo?p=preview

Answer 1

'<div data-ng-include data-ng-src="getPartial()"></div>'; 

與此

'<div data-ng-include data-ng-init="getPartial()" src="htmlToLoad"></div>'; 



var app = angular.module('plunker', []); 
app.controller('MainCtrl', ['$scope', '$compile', function($scope, $compile) { 

    $scope.displayElements = function() { 
    var template = '<div data-ng-include data-ng-init="getPartial()" src="htmlToLoad"></div>'; 
    var linkFn = $compile(template)($scope); 
    //console.log(angular.element(document.getElementById("container"))); 
    angular.element(document.getElementById("container")).append(linkFn); 
} 

$scope.getPartial = function() { 
    alert("sdfsdfsdf"); 
    console.log("from partial"); 
    return 'hello.html'; 
} 
}]); 

Answer 2

ng-include使用或者其自身的價值或src屬性來獲取路徑（see documentation）的價值。您正在嘗試使用ng-src，這是一個directive in its own right。所以，你需要做的無論是這樣的：

<div data-ng-include="getPartial()"></div> 

或本：

<div data-ng-include data-src="getPartial()"></div> 

---

在一個旁註，看着一個函數調用的結果會降低性能。將解析的源路徑放入一個範圍變量中可以更好地服務。

Answer 3

這裏是解決方案： -

var app = angular.module('plunker', []); 
app.controller('MainCtrl', ['$scope', '$compile', function($scope, $compile) { 

    $scope.displayElements = function() { 
    var template = '<div data-ng-include data-ng-init="getPartial()" src="htmlToLoad"></div>'; 
    var linkFn = $compile(template)($scope); 

angular.element(document.getElementById("container")).append(linkFn); 
}; 

$scope.getPartial = function() { 
    alert("from partial"); 
    $scope.htmlToLoad = 'hello.html'; 
}; 
}]); 

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