I have got a problem with calling a controller(not just a function) from another controller. My HTML looks like:
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<div id="msg"></div>
</div>
</div>
And the script:
var module = angular.module('MyApp', []);
module.controller('MyCtrl', [function() {
angular.element(document).ready(function () {
test();
});
}]);
module.controller('test', [function() {
document.getElementById('msg').innerHTML = 'Hello';
}]);
Please see the jsfiddle here: http://jsfiddle.net/y35emhny/
Is there any way how I can achieve it?
Related
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myMarkup"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myMarkup = "<h1>Hi {{name}}</h1>";
$scope.name="Habib";
});
</script>
Comming Output:
Hi {{name}}
Desired Output:
Hi Habib
You can compile the $scope variable with a directive and hence you do not need ngSanitize
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$sce) {
$scope.myMarkup = "<h1>Hi {{name}}</h1>";
$scope.name="Habib";
$scope.trustAsHtml = function(html){
return $sce.trustAsHtml(html);
}
});
app.directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.ngBindHtml);
function getStringValue() {
return (parsed(scope) || '').toString();
}
// Recompile if the template changes
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope); // The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="trustAsHtml(myMarkup)" compile-template></p>
</div>
You shoud use $interpolate like this: (Notice you must declare the interpolated value before the markup)
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope, $interpolate) {
$scope.name = "Habib";
$scope.myMarkup = $interpolate("<h1>Hi {{name}}</h1>")($scope);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myMarkup"></p>
</div>
app.controller("myCtrl", function($scope,$interpolate) {
$scope.name="Habib";
$scope.myMarkup = $interpolate('<h1>Hi {{name}}</h1>')($scope);
});
Try with above code. Might help!! $compile is an alternative of $interpolate. You can try that too.
I'm trying to create a new angularjs controller and this error just don't want to dissapear:
Argument 'AppController' is not a function, got undefined
My code:
var app = angular.module('myApp', [])
.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
app.html.twig
<div ng-app="myApp">
<div ng-controller="AppController">
<h1> {{'{{ data }}' }}</h1>
</div>
I really don't understand what am I missing. I ve searched for this error, and I tried the solutions presented but I can not resolve it. Any ideas?
Here is your own code. Please go through it and for more just go to plunker
//JS code
var app = angular.module('myApp', [])
.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
//template code
<div ng-app="myApp">
<div ng-controller="AppController">
<h1> {{data}}</h1>
</div>
</div>
I think you should keep it separate like this, it'll work
var app = angular.module('myApp', []);
OR
var app = angular.module('myApp');
app.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
Also this syntax is wrong but your error is not because of this
<h1> {{'{{ data }}' }}</h1>
Change
<h1> {{ data }}</h1>
Try to create like this
var jimApp = angular.module("mainApp", []);
jimApp.controller('mainCtrl', function($scope){
$scope.data = 'Hello';
});
<div ng-app="mainApp" ng-controller="mainCtrl">
{{ data }}
</div>
var app = angular.module('myApp', [])
app.controller('AppController', function($scope) {
$scope.data = 'Hello';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="AppController">
<h1> {{data}}</h1>
</div>
</div>
{{'{{ data }}' }} =======> {{data}}
I created a snippet with your provided code and jut this part in html and it's working now. Kindly check this answer.
Thank you.
I have tried writing angularJS controller inside experimental javascript of variation in optimizely. it does not seems to work.
Basically i would like to insert HTML snippet like this
<div ng-app="myApp">
<div ng-controller="MainController">firstApp</div>
</div>
and an controller for this like below:
var myApp = angular.module("myApp", []);
myApp.controller("MainController", function($scope, $window) {
alert("Angularjs call function on page load");
});
i have tried few ways and its not working, Is there any way to make it work
Plnkr code: Demo
Your html should be
<div ng-app="testApp">
<div ng-controller="MainController">firstApp</div>
</div>
and js
var myApp = angular.module("testApp", []);
myApp.controller("MainController", function($scope, $window) {
alert("Angularjs call function on page load");
});
Module app name should be same to ng-app and value of ng-controller is the name of the controller you will use
I want to investigate the content of the Watch List, to see which items are inside as to be watched. Is that possible and how may I achieve that? Consider the following code:
<html ng-app="scopeExample">
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>
<script>
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);
</script>
</html>
Yes, you can use
$scope.$$watchers
I am trying to implement a custom filter. I am getting a dependency error from angularjs.
Below is my code:
angular.module('Test', [])
.controller('TestController', ['$scope', function ($scope) {
$scope.myDate = 1456106575956;
}])
.filter('utcToDate', function(pUTCString) {
return function(pUTCString) {
return new Date(pUTCString);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Test" ng-controller="TestController">
{{myDate | utcToDate:myDate }}
</body>
Your JS should be
angular.module('Test', [])
.controller('TestController', ['$scope', function ($scope) {
$scope.myDate = 1456106575956;
}])
.filter('utcToDate', function() {
return function(pUTCString) {
return new Date(pUTCString);
}
});
HTML is fine, but can also be written as
<body ng-app="Test" ng-controller="TestController">
{{myDate | utcToDate }}
</body>
What went wrong?
You're not required to specify a parameter while defining the function for a custom filter as you have done here
.filter('utcToDate', function(pUTCString) {
More on filters from the official documentation.
Here is a Working Demo