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>
Related
I try it like bellow but result is "undefined"
Please help me
Here is code :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="carname='Volvo'">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//I want to get value of $scope.carname here
alert($scope.carname);
});
</script>
That's the default behaviour because the controller gets created first and then carname='Volvo' is set.
as a work around, you should use a function as below instead,
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.init = function(carName) {
$scope.carname = carName;
alert($scope.carname);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="init('Volvo')">
<h1>{{carname}}</h1>
</div>
<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 get this error - Error: $controller:ctrlreg A controller with this name is not registered. All of my scripts are loaded, and I added them all in index.html.
All scripts are loaded
My controller:
(function() {
angular.module("nsoftModule").controller("nsoftController", ["nsoftService", function(nsoftService) {
var self = this;
self.service = nsoftService;
}])
})();
My directive:
(function() {
var weatherMod = angular.module("nsoftModule", []);
weatherMod.directive("nsoftDirective", function() {
return {
templateUrl: "Template/weatherTemplate.html",
controller: "nsoftController as nsoftCtrl"
}
});
})();
My service:
(function() {
var weatherMod = angular.module("nsoftModule", []);
weatherMod.service("nsoftService", ["http", function(http) {
var service = this;
}]);
})();
My module:
(function() {
var weatherMod = angular.module("nsoftModule", []);
})();
My template:
<div class="container">
<div ng-controller="nsoftController">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</div>
My app.js:
(function() {
angular.module("nsoftApp", ["nsoftModule"]);
})();
And my index.html:
<!DOCTYPE html>
<html ng-app="nsoftApp">
<head>
<title>Nsoft App</title>
</head>
<body>
<nsoft-directive></nsoft-directive>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="weatherModule.js"></script>
<script src="Service/weatherService.js"></script>
<script src="Controller/weatherController.js"></script>
<script src="Directive/weatherDirective.js"></script>
<script src="app.js"></script>
</body>
</html>
just remove the global variable because in you are using anonymous self invoking function variable is only limited to one anonymous function. use like his
(function() {
angular.module("nsoftModule").controller("nsoftController", ["nsoftService", function(nsoftService) {
var self = this;
self.service = nsoftService;
}])
})();
(function() {
angular.module("nsoftModule").directive("nsoftDirective", function() {
return {
templateUrl: "Template/weatherTemplate.html",
controller: "nsoftController as nsoftCtrl"
}
});
})();
//change http to $http
(function() {
angular.module("nsoftModule").service("nsoftService", ["$http", function($http) {
var service = this;
}]);
})();
(function() {
angular.module("nsoftModule", []);
})();
since controller assign from the directive no need to declare it in the html also
<div class="container">
<div >
<p>Name : <input type="text" ng-model="nsoftCtrl.name"></p>
<h1>Hello {{nsoftCtrl.name}}</h1>
</div>
(function() {
angular.module("nsoftApp", ["nsoftModule"]);
})();
I am taking date and time from the user input and
<input type="datetime-local" ng-model= "datetime" name="datetime" min="2016-01-01T00:00:00" max="2116-12-31T00:00:00" class="b" required/>
want to appear it in this div <div ng-bind="x.todoTime| date : 'medium'" class="bb"></div> but with the interval of 1000.How should I do it?
Js code:-
var app =angular.module('toDolist', []);
app.controller("toDoCtrl",function($scope, $interval) {
$scope.todoWork = [];
$scope.todoAdd = function() {
$scope.todoWork.push({todoText:$scope.task,todoDesc:$scope.description,todoTime:$scope.datetime,todoPriority:$scope.priority,done:false});
$scope.task ='';
$scope.description ='';
$scope.datetime ='';
$scope.priority ='';
};
$interval(function(){
$scope.datetime;;
},1000);
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Date: <input type="datetime-local" ng-model="datetime" min="2016-01-01T00:00:00" max="2116-12-31T00:00:00" id="myLocalDate" value="2014-11-16T15:00:33" ng-change="changeTimer()">
<h1 ng-bind="timerModel"></h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
var tt;
$scope.datetime= "";
$scope.changeTimer = function(){
$interval.cancel(tt);
var t= angular.copy($scope.datetime);
tt= $interval(function(){
t.setSeconds((new Date(t)).getSeconds()+1);
$scope.timerModel=angular.copy(t);
}, 1000);
}
});
</script>
</body>
</html>