I have a problem. In my html file I have a following content:
<div ng-controller='nav'>
<ul >
<li ng-show="sh" >
<a ui-sref="problems">name</a>
</li>
</div>
My controller is:
app.controller('nav', function($scope, $state, $http){
$(function(){
$scope.sh=true;
//$http.get('something');
});
});
If
$http.get('something')
is commented, ng-show does not work. However, if I uncomment it, it starts to work. I cannot understand the reason of this. Did you have a similar problem?
Try this below code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-controller='nav'>
<ul>
<li ng-show="sh">
<a ui-sref="problems">name</a>
</li>
</ul>
</div>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('nav', function ($scope, $state, $http) {
$scope.sh = true;
$http.get('something')
});
</script>
</body>
</html>
I dont know why you included the jquery part. It is always good to not to use jquery in AngularJS projects. You will get almost all things in AngularJS one way or the another.
There is no need for jquery function there you can directly use $scope.sh=true;
Related
I am trying to call one angular js function using controller. I am using code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DevPortal</title>
<script src="js/angular.min.js"></script>
<script src="js/controllers/app.js"></script>
</head>
<body ng-app="devportal">
<div ng-include="'templates/login_menu.html'"></div>
</body>
</html>
app.js
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
return{
getuserloginmenu : function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})},
getuserloginmenu1 : function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})}
};
});
login_menu.html
<div ng-controller="AppController as ctrl">
<div on-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
My rest service is working properly and returns String array. I am not able to call/get the rest service data in html.
Your code seems legit, the only thing making noise (at least for me) is the on-init you added to call the function. I think that's the problem.
Try
<div ng-controller="AppController as ctrl">
<div ng-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
And maybe.. To keep it clean: Change the syntax of the controller (even if it works)
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
});
Edit:
That's a missuse of ng-init. I'll leave the documentation of Angular for that matter
https://www.w3schools.com/angular/ng_ng-init.asp
But shortly, you want $scope.loginmenu to populate. You don't need to wait until the div loads. You can populate $scope.loginmenu right away when the controller inits.
View
<div ng-controller="AppController as ctrl">
<div>
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
Controller
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
$scope.getuserloginmenu();
});
I need to add dynamic template on click for that i have used :
var action_template='';
app.controller('EventCtrl',function($rootScope){
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png"></a></li></ul>';
$rootScope.template=action_template;
});
In html:i have used ngSanitize
<ul>
<li ng-bind-html="template"></li>
</ul>
template is appending perfectly but there is no href link.
what I am doing wrong ? Or is there any solution for doing the same thing ?
The main problem was unable to add any angular directives such as ng-click, ng-href, ui-sref etc.
But after adding $sce.trustAsHtml it is adding ui-sref but not adding any hyperlink.
Hint will be appreciable.
Thanks
I think you forgot trustAsHtml in your controller(you can see in the snippet after running, that ui-sref is present in the source):-
var app = angular.module("myApp", []);
var action_template='';
app.controller("myCtrl", function($scope,$rootScope,$sce) {
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate">Link</a></li></ul>';
$rootScope.template=$sce.trustAsHtml(action_template);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-bind-html="template"></li>
</ul>
</div>
You need trust your HTML, using $sce, Try below code
var jimApp = angular.module("mainApp", []);
jimApp.controller('EventCtrl',function($rootScope, $sce, $scope){
var action_template='';
action_template = action_template +'<ul><li><a ui-sref="/root/authenticate"><img src="default.png" alt="Default image">Link</a></li></ul>';
$scope.template=$sce.trustAsHtml(action_template);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="EventCtrl">
<ul>
<li ng-bind-html="template"></li>
</ul>
</div>
I've started moving my angularJS controllers into separate files for the sake of readability, however I found this causes the controller defined in a separate file to not run at all. However, I'm wondering if this has to do with my MakeGray.html being in a separate folder from MakeGray.js?
http://imgur.com/2XWf8Ge
When the drop down menu item selected is MakeGray it will inject the following html
<html ng-app="app">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/opencv_css.css" />
</head>
<body ng-controller="MakeGray">
<div class="row">
<div class ="col-md-4 col-md-offset-5">
<!--<button type="button" class="btn btn-primary" ng-model-->
<button ng-click="MakeGray_Button()">Make Gray</button>
</div>
</div>
<script src="../../js/jQuery.js"></script>
<script src="../../js/angular.js"></script>
<script src="../../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="../../js/MakeGray.js"></script>
<script src="../../js/app.js"></script>
</body>
</html>
js app
var app = angular.module("app", [
"MakeGray",
"ui.bootstrap"
]);
js MakeGray
var MakeGray = angular.module("MakeGray", ["ui.bootstrap"]);
MakeGray.controller("MakeGray",["$scope", "$http", function($scope, $http){
alert("HELLO"); // Doesn't even get to hello when I click on the MakeGray button
}]);
My firebug outputs no errors
I'm not sure what you mean by the title, you're only trying to access one controller on this page. Anyway the functionality you're trying to get works.. heres a plnkr. I will note that you have to wrap the alert in a $scope function to make it fire with the button.
var MakeGray = angular.module("MakeGray", ["ui.bootstrap"]);
MakeGray.controller("MakeGray",["$scope", "$http", function($scope, $http){
$scope.MakeGray_Button = function(){
alert("HELLO"); // Does get to hello when I click on the MakeGray button
}
}]);
For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
To anyone else using a node.js backend and not using jade as a template language, I hope this helps!
It would be better to explicitly define the controller inside the module:
var myApp = angular.module("myApp", []);
myApp.controller('IndexCtrl', function($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
});
But.... I copied the code exactly, replaced angular resource path. And all is working.
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
I am currently ramping up with angular, and trying to make dynamic routing work.
Note: I have looked at the question: How to defer routes definition in Angular.js?, and I believe I am doing everything it states, but I'm still getting the error "unknown provider: $routeProvider"
What am I doing wrong?
html:
<!doctype html>
<html ng-app="rProvider">
<head>
<link rel="stylesheet" href="css/style.css">
<script src="lib/angular/angular.js"></script>
<script src="js/routeProviderTest.js"> </script>
</head>
<body>
<div ng-controller="rControl">
<h2>Route Controller Test</h2>
[Route 1 | <a>Route 2</a>]
<hr/>
<span class="partial-info">
Partial: {{routeValue}}
</span>
<div ng-view></div>
<small>The Bottom</small>
</div>
</body>
</html>
js:
var myAppModule = angular.module('rProvider',[]);
myAppModule.config(function($routeProvider){
$routeProvider.when("r1",{templateUrl:"/route1.html"});
});
myAppModule.controller('rControl', function($scope, $route){
$scope.routeValue = 'nothing yet';
});
thanks in advance...
If you are using version 1.2.x, you need to download angular-route.js, include it via the <script> tag, and add it as a dependency module in JavaScript:
<!-- in HTML -->
<script src='angular-route.js'></script>
// in JavaScript
var myAppModule = angular.module('rProvider', ['ngRoute']);
Maybe this will help you:
http://www.egghead.io/video/gNtnxRzXj8s
This guy has some pretty good tutorials on AngularJS. Or some of the next videos about the routeProvider.