如何使作用域函數可用於角度編譯模板

我想編寫一個服務，它將爲指令編譯HTML並將其附加到正文元素。雖然文本正在被指令處理，但函數不是。如何使作用域函數可用於角度編譯模板

這是一個更簡單的版本，我不能用ng-click指令做同樣的工作，並從控制器編譯它。任何人都可以請告訴我我該如何實現這一目標。我的目標是創建一個非常基本的指令，其功能類似於角度ui-bootstrap中的模態或來自Angular材質的對話服務。

angular 
 
    .module('app', []) 
 
    .controller('ctrl', ctrl); 
 

 
function ctrl($scope, $compile) { 
 
    var html = '', 
 
    newScope = $scope.$new(true), 
 
    newScope1 = $scope.$new(true); 
 

 
    $scope.text = 'from controller'; 
 
    $scope.fun = function() { 
 
    alert('from controller'); 
 
    }; 
 
    newScope.text = 'from controller with new scope'; 
 
    newScope.fun = function() { 
 
    alert('from controller with new scope'); 
 
    }; 
 
    newScope1.text = 'from controller with new scope1'; 
 
    newScope1.fun = function() { 
 
    alert('from controller with new scope1'); 
 
    }; 
 

 
    html = $compile('<button ng-click="fun">{{text}}</button>')($scope); 
 
    angular.element('body').append(html); 
 

 
    html = $compile('<button ng-click="fun">{{text}}</button>')(newScope); 
 
    angular.element('body').append(html); 
 

 
    $compile('<button ng-click="fun">{{text}}</button>')(newScope1, function(clonedElement, scope) { 
 
    console.log(clonedElement, scope); 
 
    angular.element('body').append(clonedElement); 
 
    }); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app" ng-controller="ctrl"> 
 
    <h1>Hello Plunker!</h1> 
 
</body> 
 

 
</html>

plunkr

來源

2016-04-14 Jack

爲什麼編譯指令和將它附加到body而不是像'這樣的標籤？ – Gianmarco

當你想打開一個對話框或什麼的時候，可能會在返回一個ajax響應之後。這種方法似乎比較乾淨，而不是一直等待ngIf/ngShow時在頁面上放置一個指令，特別是當可能有大量的ajax或類似的對話觸發工作正在進行時。 – Jack

你這樣做是正確的只是調用該方法使用ng-click="fun()"代替ng-click="fun"（唯一缺少的）

html = $compile('<button ng-click="fun()">{{text}}</button>')(newScope);

來源

2016-04-14 08:38:24 manish

如何使作用域函數可用於角度編譯模板

回答

相關問題