<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.
Related
The first time I used angular.js, using http request to dynamically render data, I encountered such a strange problem, there is no problem with the following code alone, but if you put it in the page I want to do , it will give an error:
Error: [ng:areq] Argument 'customersCtrl' is not a function, got undefined
But I have defined customersCtrl,
<div ng-controller="customersCtrl">
This is my code:
<div ng-app="myApp" >
<div ng-controller="customersCtrl">
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:17900/flower/flowers?flowerName")
.then(function (result) {
$scope.names = result.data.body;
});
});
</script>
</div>
You must define the <script> tag outside of the ng-app element. Should you use inline js, the script tag must be defined before the ng-app element.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = ["Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas"]
// $http.get("http://localhost:17900/flower/flowers?flowerName")
// .then(function (result) {
// $scope.names = result.data.body;
// });
});
</script>
<div ng-app="myApp">
<div ng-controller="customersCtrl">
<p ng-repeat="name in names">{{name}}</p>
</div>
</div>
Note
I recommend you to use version 1.7.5
The problem is you include the angular controller in html tags before you define it, So angular compiler could not find the customersCtrl as function.
Edit Your code like this :
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl',['$scope','$http' function($scope, $http) {
$http.get("http://localhost:17900/flower/flowers?flowerName")
.then(function (result) {
$scope.names = result.data.body;
});
}]);
</script>
<div ng-app="myApp" >
<div ng-controller="customersCtrl"></div>
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.
My HTML & JS is below.
Can we insert a run / config after a delay in angularJs?
var app = angular.module('demo', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
setTimeout(function(){
angular.module('plunker').run(function($rootScope){
$rootScope.$apply(function (){
$rootScope.hello = "works";
});
});
},1000);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="demo">
<div ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
{{$root.hello}}
</div>
</section>
I would appreciate if anyone can help with this. Thank you :)
You can make use of $timeout to run a delay.
No need to initialize a new module for this.
var app = angular.module('demo', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.run(function($rootScope, $timeout) {
$timeout(function() {
$rootScope.hello = "works";
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="demo">
<div ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
{{hello}}
</div>
</section>
I have 2 controllers i want to call a function in one controller in another. I'm using this and I'm not using any $scope. How can i call a function from one controller to another.
var app = angular.module("myapp", []);
app.controller("myctl", function () {
var parent= this;
parent.SayHello = function () {
// code
}
})
app.controller("otherctl", function () {
var child = this;
// how to call sayHello without $scope
})
You cannot, even if you are using $scope.
You cannot inject one controller to another controller.
In order to share the data among the controllers, consider using factory/service.
DEMO
var app = angular.module("clientApp", [])
app.controller("TestCtrl",
function($scope,names) {
$scope.names =[];
$scope.save= function(){
names.add($scope.name);
}
});
app.controller("TestCtrl2",
function($scope,names) {
$scope.getnames = function(){
$scope.names = names.get();
}
});
app.factory('names', function(){
var names = {};
names.list = [];
names.add = function(message){
names.list.push({message});
};
names.get = function(){
return names.list;
};
return names;
});
<!doctype html>
<html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="clientApp">
<div ng-controller="TestCtrl">
<input type="text" ng-model="name">
<button ng-click="save()" > save</button>
</div>
<div ng-init="getnames()" ng-controller="TestCtrl2">
<div ng-repeat="name in names">
{{name}}
</div>
</div>
</body>
</html>
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