Angular ng-click不能與$ compile一起工作

我有類似於下面的代碼的代碼在Angular應用中觸發click事件。爲什麼不觸發事件？

var app = angular.module("myApp", []) 

app.directive('myTop',function($compile) { 
return { 
    restrict: 'E', 
    template: '<div></div>', 
    replace: true, 
    link: function (scope, element) { 
     var childElement = '<button ng-click="clickFunc()">CLICK</button>'; 
     element.append(childElement); 
     $compile(childElement)(scope); 

     scope.clickFunc = function() { 
      alert('Hello, world!'); 
     }; 
    } 
} 
})

來源

2015-12-10 freddy83

改變你的編譯語句是這樣的：

$compile(element.contents())(scope);

你是傳遞一個DOM串childElement這實在不是一個DOM元素，而不是它是一個字符串。但$compile需要DOM元素來實際編譯內容。

var app = angular.module("myapp", []); 
 

 
app.directive('myTop', ['$compile', 
 
    function($compile) { 
 
    return { 
 
     restrict: 'E', 
 
     template: '<div></div>', 
 
     replace: true, 
 
     link: function(scope, element) { 
 
     var childElement = '<button ng-click="clickFunc()">CLICK</button>'; 
 
     element.append(childElement); 
 
     $compile(element.contents())(scope); 
 

 
     scope.clickFunc = function() { 
 
      alert('Hello, world!'); 
 
     }; 
 
     } 
 
    } 
 
    } 
 
])

<html> 
 

 
<body ng-app="myapp"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <my-top></my-top> 
 
</body> 
 

 
</html>

來源

2015-12-10 09:03:52

如果你讀'$ compile'使用的文檔，你會看到它接受一個字符串。 https://docs.angularjs.org/api/ng/service/$compile#usage –

Angular ng-click不能與$ compile一起工作

回答

相關問題