I have a trouble with simple application, like this exemple:
ng-click after compile does not work.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-compile-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="compileExample">
<script>
angular.module('compileExample', [], function($compileProvider) {
// configure new 'compile' directive by passing a directive
// factory function. The factory function injects the '$compile'
$compileProvider.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
});
})
.controller('GreeterController', ['$scope', function($scope) {
$scope.name = 'Visitor';
$scope.html = 'Hello {{name}} have a look at <form><button ng-click="popFailed()">ng click which Failed</button></form> After successful request';
$scope.popSuccess = function() {
alert('pop success');
};
$scope.popFailed = function() {
alert('test success');
};
}]);
</script>
<div ng-controller="GreeterController">
<form>
<button ng-click="popSuccess()">ng click which succed</button>
</form>
<br/>
<input ng-model="name"> <br/>
<textarea ng-model="html"></textarea> <br/><br/><br/><br>
<div compile="html"></div>
</div>
<!-- Exemple of angularJs bootstrapping
<script>
// bootstrap the app to angular
angular.bootstrap(document.getElementById('compile_example'), ['compile_example']);
</script>
-->
</body>
</html>But when Im using symfony which provide rest-api that generate my template (like $scope.html), return string of html as describe in the example. but My ng-click does not work. EventListener e.g. (ev) indication does not apear on my browser inspector
I am using angular.bootstrap with id instead of ng-app for my application declaration
I need help
- I thought that it is due of my angular.bootstrap position on the bottom page
- Event e.g. (ev) indication is shown on browser inspector for this example but does not apear on my project
- How to know if html and directives has been "compiled" properly? make event listener apear on my button form
