following code create error like this
Uncaught Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=subCtrl&p1=not%20a%20function%2C%20got%20undefined
how can i fix it?
sample code here
http://plnkr.co/edit/i3KmuFd09puvCyfqoX39?p=preview
index.html
var myapp = angular.module("myapp",[]);
myapp.controller( "mainCtrl" , ["$scope","$compile",function($scope,$compile){
var p = $scope;
p.getSub = function() {
var url = "sub.html";
$.ajax({url:url,success:function(html) {
$("#content").html(html);
$compile(html)($scope);
}});
}
}]);
<body ng-controller="mainCtrl">
<button ng-click="getSub()">getSub</button>
<div id="content">
sub.html
</div>
</body>
sub.html
<script>
myapp.controller( "subCtrl" , ["$scope",function($scope){
alert("subCtrl created");
}]);
</script>
<div ng-controller="subCtrl">
sub.html loaded.
</div>
the problem is in the nested controllers. So you use "main" controller with $compile, and in the very next time you include nested controller in the same html.
So the solution is:
$.ajax({url:url,success:function(html) {
$("#content").html(html);
$compile(html)($scope);
alert("subCtrl created");
}});
and in the sub.html:
<div>
sub.html loaded.
</div>
Good luck.
in HTML:
<body ng-controller="mainCtrl">
<button ng-click="getSub()">getSub</button>
<div ng-if="showSub">
<div ng-include="{{mySub}}.html"></div>
</div>
</body>
your controller:
myapp.controller( "mainCtrl" , ["$scope",function($scope){
$scope.showSub = false;
$scope.mySub = '';
$scope.getSub = function(){
$scope.mySub = "sub"; // change this to include other files
$scope.showSub = true;
};
}]);
Related
I'd like to set a scope for a different route but it seems not working...
var app = angular.module('AngularApp', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'menu.html',
controller: 'MenuController'
}).when('/slides/:menuItem', {
templateUrl: 'slides.html',
controller: 'SlidesController'
});
});
app.controller('MenuController', function($scope, $http) {
$http.get('database.json').then(function(response) {
$scope.bottomBar = 'no';
$scope.pageClass = 'menus';
$scope.database = response.data;
});
});
app.controller('SlidesController', function($scope, $http, $routeParams) {
$http.get('database.json').then(function(response) {
$scope.bottomBar = 'yes';
$scope.pageClass = 'slides';
$scope.database = _.find(response.data.menuItems, {'url': $routeParams.menuItem});
});
});
<body ng-app="AngularApp">
<div class="line">
<div class="col-12">
<img src="images/logo.jpg">
</div>
</div>
<div class="page {{pageClass}}" ng-view></div>
<div class="bottom-bar">
<ul>
<li>Retour {{bottomBar}}</li>
</ul>
</div>
</body>
bottomBar is empty...
Looks like you are putting html in app directly.
You can move below code in a template and use ng-include to add this template in you all views.
<div class="bottom-bar">
<ul>
<li>Retour {{bottomBar}}</li>
</ul>
</div>
This is because your controller scope is present in this div with ngView. Therefore anything outside this div won't have scope binding.
<div class="page {{pageClass}}" ng-view></div> <!-- controller active here only -->
I'm tring to repeat an array in the html
html:
<div class="personWrapper" ng-repeat="message in messages">
<p>{{message}}</p>
</div>
js:
var app = angular.module('matcherApp', [ "ngRoute", "ngStorage" ]);
app.config(function($routeProvider) {
$routeProvider.when('/Messages', {
templateUrl : 'menu/messages.php',
controller : 'messagesController'
})
});
app.controller('messagesController', function($scope, $localStorage) {
console.log("im in messages page!!!");
var messagesUsers = [];
$.post("db.php", {
'messagesWindow' : "messagesWindow",
'myProfileId' : JSON.parse(localStorage.getItem("myProfileDetails")).id
}, function(data) {
data = $.parseJSON(data);
angular.forEach(data, function(key, value) {
angular.forEach(key, function(key2, value2) {
messagesUsers.push(key2.Name);
});
});
console.log(messagesUsers);
$scope.messages = messagesUsers;
}).fail(function() {
alert("error bringing messages data");
});
});
the console.log show me:
im in messages page!!!
["a","b"]
that works with all different controllers in the same app.
its not showing me on the dom any loop.
what am i doing wrong? thanks.
Works for me! Look
var app = angular.module('MessagesApp', []);
app.controller('MessagesController', function($scope) {
$scope.messages = ["a", "b"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MessagesApp" ng-controller="MessagesController">
<div class="personWrapper" ng-repeat="message in messages">
<p>{{message}}</p>
</div>
</div>
JS Code looks like below:
var app = angular.module('modelapp', []);
app.controller('ctrl', function($scope) {
$scope.emplist = ["john", "marry", "jaison"];
});
HTML Code:
<div ng-app="modelapp" ng-controller="ctrl">
<div ng-repeat="data in emplist">
<p>{{data}}</p>
</div>
</div>
It will load entire list, You can add class for div as per design, Even you can track index number also by using $index directive.
the view in the index file is not updating. here are the code snippits.
index:
<body class="container" ng-controller="indexController">
<div ng-if="isLogin">
<div class="wrapper">
<div ng-include="src/partial/header.html"></div>
<div ng-include="src/partial/leftNavBar.html"></div>
<div ui-view></div>
<div ng-include="src/partial/footer.html"></div>
</div>
</div>
<div ng-if="!isLogin">
<div ui-view></div>
</div>
</body>
indexController:
.controller('indexController', indexController);
function IndexController(global, $scope){
function setupLogin(){
$scope.isLogin = global.getLogin();
};
$scope.$on('UPDATE_Login', setupLogin);
}
and my Login Controller:
.controller('Login', Login);
/* #ngInject */
function Login(auth, $location, global, $scope){
var vm = this;
vm.loginBtn = function login(credentials){
vm.dataLoading = true;
auth.loginService(credentials).then(function (result){
vm.dataLoading = false;
if(result.responseCode === '00'){
global.setLogin(true);
$scope.$broadcast('UPDATE_Login');
$location.path('/default');
}else {
vm.errorMessage = result.responseDescription;
}
});
}
}
the problem that i am facing is that when the scope from the login controller broadcast, it doesn't show and includes my partial header navigation and footer files.
am i missing something here ?
have you tried to to wrap setupLogin() in timeOut:
.controller('indexController', indexController);
function IndexController(global, $scope,$timeout){
function setupLogin(){
$timeout(()=>{
$scope.isLogin = global.getLogin();
},100);
};
$scope.$on('UPDATE_Login', setupLogin);
}
sometimes it helps with problems like this
goodluck
I want a angularjs code in which 1 controller is using .service set method to set the value and another controller using the .service get method to retrieve that value.
also i tried this code please let me know why it is not printing the right output.
i tried this code but after setting value it is not printing value...can you help me out in this ..
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>
<script>
var app = angular.module('myApp', []);
app.service('sharedProperties', function() {
var stringValue = ' ';
return{
getString: function() {
return stringValue;
},
setString: function(value) {
stringValue = value;
}
}});
app.controller('get', function($scope,sharedProperties) {
$scope.stringValue = sharedProperties.getString();
});
app.controller('set', function($scope, sharedProperties) {
$scope.setString = function(newValue) {
$scope.objectValue.data = newValue;
sharedProperties.setString(newValue);
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="set">
<input type=text ng-model="newValue">
<button onclick="setString(newValue)" >Click here</button>
</div>
<div ng-controller="get">
value is {{stringValue}}
</div>
</body>
</html>
Answers will be appreciated.
I dont understand what is stopping you?
Just read the angular docs https://docs.angularjs.org/guide/services
Quick fiddle
angular.module('serviceApp',[]);
angular.module('serviceApp').service('SharedService',[function(){
var value = '';
this.set = function(val){
value = val;
};
this.get = function(val){
return value;
}
}]);
angular.module('serviceApp').controller('OneCtrl',['$scope','SharedService',function($scope,sharedService){
$scope.form = {value:''}
$scope.setValue = function(){
sharedService.set($scope.form.value);
}
}]);
angular.module('serviceApp').controller('TwoCtrl',['$scope','SharedService',function($scope,sharedService){
$scope.value = sharedService.get();
$scope.getValue = function(){
$scope.value = sharedService.get();
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="serviceApp">
<div ng-controller="OneCtrl">
<input ng-model="form.value" type="text" />
<button type="button" ng-click="setValue()">Set</button>
</div>
<div ng-controller="TwoCtrl">
<button type="button" ng-click="getValue()">Get</button>
Value: {{value}}
</div>
</div>
I have the following
var model =
{
UserInfo :null ,
PlatformID : 1
}
var myApp = angular.module("myApp", []);
myApp.controller("UCtrl",['$scope','$http','$window', function ($scope, $http,$window) {
$scope.Info =model ;
$scope.SearchUser = function() {
$http({
method:"POST",
url : '/FindUser',
data: {UserID : 9999}
}).success(function(data){
$scope.Info.UserInfo = data;
});
};
});
<div ng-hide="{{Info.UserInfo === null}}" >
</div>
When a user is searched for , the Info.User is updated via $http post via
$scope.Info.User = data ;
The ng-hide part does not show after the data is assigned to the Info.User object even though there is data.
Don't user {{}} inside ng-if. Expression will be executed anyway:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
</head>
<body ng-app="Example">
<div data-ng-controller="Cntrl">
<div ng-hide="UserInfo === null" >
User info
</div>
<button data-ng-click="toggle()">Toggle</button>
</div>
<script>
var app = angular.module("Example", [])
.controller("Cntrl", function ($scope) {
$scope.UserInfo = null;
$scope.toggle = function () {
if ($scope.UserInfo === null) {
$scope.UserInfo = 'some value';
} else {
$scope.UserInfo = null;
}
};
});
</script>
</body>
</html>
EDIT: here is another fiddle with code more like yours: http://jsfiddle.net/kpLe544u/3/
I think the issue is that you haven't declared a controller in your HTML so you cannot access the variable Info.UserInfo from that div.
Excerpts from my fiddle: (http://jsfiddle.net/kpLe544u/2/)
HTML
<div ng-app>
<div ng-controller="MyCtrl">
<div ng-show="Info.User">data here</div>
<div ng-show="Info.Test">this won't show</div>
</div>
</div>
controller.js
function MyCtrl($scope) {
$scope.Info = {};
$scope.Info.User = "blah blah";
$scope.Info.Test = null;
}