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
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 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 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?
I am using Angular.
In my controller I have:
mainApp.controller('loginBoxController', ['$scope', '$state', 'mainWebService', function($scope, $state, mainWebService) {
$scope.usernameText = "";
$scope.clear_fields = function() {
$scope.usernameText = "";
},
$scope.btnCancel = {
width:'45%',
height:'30px',
roundedCorners: 'all',
click : function(){
$scope.clear_fields();
}
};
}]);
And in my HTML, I have
<div >
<input ng-jqxinput="txtusername" ng-model="usernameText" type="text" id="txtusernameID"/>
</div>
So, where have I gone wrong. Please help me.
Please try this, create new single page app and run it. It will solve your problem.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.18/angular.js"></script>
<script>
var mainApp = angular.module('MyApp', []);
mainApp.controller('loginBoxController', ['$scope', function($scope) {
$scope.usernameText = "";
$scope.clear_fields = function() {
$scope.usernameText = "";
},
$scope.btnCancel = {
width:'45%',
height:'30px',
roundedCorners: 'all',
click : function(){
$scope.clear_fields();
}
};
}]);
</script>
</head>
<body ng-app="MyApp" ng-controller="loginBoxController">
<div >
<input ng-jqxinput="txtusername" ng-model="usernameText" type="text" id="txtusernameID"/>
<input type ="button" value="submit" ng-click="clear_fields()"/>
</div>
</body>
</html>
$scope.$apply() after the $scope.clear_fields();
solved my issue.
$scope.btnCancel = {
width:'45%',
height:'30px',
roundedCorners: 'all',
click : function(){
$scope.clear_fields();
$scope.$apply();
}
};