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
Related
Issue is all my divs open on click.
I want only that div to open with its content which is clicked.
openBigDiv function is :
$scope.IsHidden = true;
$scope.openBigDiv = function {
$scope.IsHidden = $scope.IsHidden ? false : true;
}
I am calling function in div using ng-click.
You can use visibility flag array
HTML :
<div ng-app="testApp">
<div ng-controller="testController">
<div>
<button ng-click="showElem('elem1');">Show elem1</button>
<div ng-show="IsElemVisible('elem1')">elem1</div>
<button ng-click="showElem('elem2');">Show elem2</button>
<div ng-show="IsElemVisible('elem2')">elem2</div>
</div>
</div>
</div>
Or HTML if you want to use looping :
<div ng-app="testApp" ng-init="myElems=['elem1','elem2','elem3']">
<div ng-controller="testController">
<div ng-repeat="elem in myElems">
<button ng-click="showElem(elem);">Show {{elem}}</button>
<div ng-show="IsElemVisible(elem)">{{elem}}</div>
</div>
</div>
</div>
Javascript :
var app = angular.module('testApp', []);
app.controller('testController', function ($scope, $location, $rootScope, $log) {
$scope.hiddenElements = [];
$scope.IsElemVisible = function(elemId) {
return $scope.hiddenElements[elemId];
}
$scope.showElem = function (elemId) {
$scope.hiddenElements[elemId] = true;
}
});
Fiddle
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;
};
}]);
my problem is that the ng-repeat is not updating automatically the data. When I press add pin in my code, the element is added correctly to the database. If I reload the page the data appear correctly, but not as angular should.
For the record, the Update and delete are working correctly.
Thanks in advance
This is my app.js code:
var app = angular.module("app", []);
app.controller("AppCtrl", function ($http) {
var app = this;
$http.get("/api/pin").success(function (data) {
app.pins = data.objects;
})
app.addPin = function (scope) {
$http.post("/api/pin", {"title":"new", "image":"http://placekitten.com/200/200/?image=" + app.pins.length})
.success(function(data) {
add.pins.push(data);
})
}
app.deletePin = function (pin) {
$http.delete("/api/pin/" + pin.id).success(function(response) {
app.pins.splice(app.pins.indexOf(pin), 1)
})
}
app.updatePin = function (pin) {
$http.put("/api/pin/" + pin.id, pin);
}
})
This is my index.html file:
<html>
<head>
<title>Pin Clone</title>
<script src="angular/angular.js"></script>
<script src="angular/angular-resource.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<button ng-click="app.addPin()">Add Pin</button>
<div ng-repeat="pin in app.pins">
<img ng-src="{{ pin.image }}" alt=""/>
<div class="ui">
<input type="text" ng-model="pin.title"/>
<button ng-click="app.updatePin(pin)">Update</button>
<button ng-click="app.deletePin(pin)">Delete</button>
</div>
</div>
</body>
</html>
First of all, you should really use $scope (Doc) in your controller. You can read more about the differences in this post.
Thus your controller would look like this.
app.controller("AppCtrl", ["$scope", "$http",
function ($scope, $http) {
$http.get("/api/pin").success(function (data) {
$scope.pins = data.objects;
});
$scope.addPin = function () {
....
};
$scope.deletePin = function (pin) {
....
};
$scope.updatePin = function (pin) {
....
};
}]);
HTML:
<body ng-app="app" ng-controller="AppCtrl">
<button ng-click="addPin()">Add Pin</button>
<div ng-repeat="pin in pins">
<img ng-src="{{ pin.image }}" alt=""/>
<div class="ui">
<input type="text" ng-model="pin.title"/>
<button ng-click="updatePin(pin)">Update</button>
<button ng-click="deletePin(pin)">Delete</button>
</div>
</div>
</body>
Finally, here comes the core part. You should call $apply (Doc) when your models change. You can read more in this blog post.
$http
.post("/api/pin", {
title: "new",
image:
"http://placekitten.com/200/200/?image="
+ $scope.pins.length
})
.success(function(data) {
$scope.$apply(function() {
$scope.pins.push(data);
});
});
Thus, the full controller code:
app.controller("AppCtrl", ["$scope", "$http",
function ($scope, $http) {
$http.get("/api/pin").success(function (data) {
$scope.pins = data.objects;
});
$scope.addPin = function () {
$http
.post("/api/pin", {
title: "new",
image:
"http://placekitten.com/200/200/?image="
+ $scope.pins.length
})
.success(function(data) {
$scope.$apply(function() {
$scope.pins.push(data);
});
});
};
$scope.deletePin = function (pin) {
$http
.delete("/api/pin/" + pin.id)
.success(function(response) {
$scope.$apply(function() {
$scope.pins.splice(
$scope.pins.indexOf(pin), 1
);
});
});
};
$scope.updatePin = function (pin) {
$http.put("/api/pin/" + pin.id, pin);
};
}]);
Cannot agree with Gavin. First, what you're doing is totally fine. Creating instance of controller is a much better practice than using $scope. Second, $apply() is not needed here.
The problem is ng-repeat created a new scope. While pin is updated, app.pins is not. You should do
var app = angular.module("app", []);
app.controller("AppCtrl", function ($http) {
var app = this;
$http.get("/api/pin").success(function (data) {
app.pins = data.objects;
})
app.addPin = function (scope) {
$http.post("/api/pin", {"title":"new", "image":"http://placekitten.com/200/200/?image=" + app.pins.length})
.success(function(data) {
add.pins.push(data);
})
}
app.deletePin = function (index) {
$http.delete("/api/pin/" + app.pins[index].id).success(function(response) {
app.pins.splice(index, 1)
})
}
app.updatePin = function (index) {
$http.put("/api/pin/" + app.pins[index].id, app.pins[index]);
}
})
and
<html>
<head>
<title>Pin Clone</title>
<script src="angular/angular.js"></script>
<script src="angular/angular-resource.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<button ng-click="app.addPin()">Add Pin</button>
<div ng-repeat="pin in app.pins track by $index">
<img ng-src="{{ pin.image }}" alt=""/>
<div class="ui">
<input type="text" ng-model="pin.title"/>
<button ng-click="app.updatePin($index)">Update</button>
<button ng-click="app.deletePin($index)">Delete</button>
</div>
</div>
</body>
</html>
check here: How to update ng-model on event click using $event in Angularjs
in posted code you've got typo error
app.addPin = function (scope) {
$http.post("/api/pin", {"title":"new", "image":"http://placekitten.com/200/200/?image=" + app.pins.length})
.success(function(data) {
// add.pins.push(data); <--- app not add
app.pins.push(data)
})
}
My view is:
<div class="container" ng-controller="MyController">
<div class="row">
<div class="col-md-8">
<textarea class="form-control" rows="10" ng-model="myWords" ng-change="parseLanguage()"></textarea>
</div>
<div class="col-md-4" ng-show="sourceLanguage !== null">
Language: {{ sourceLanguage }}
</div>
</div>
</div>
My controller is:
webApp.controller('MyController', [
'$scope', '$rootScope', 'TranslateService', function($scope, $rootScope, CodeService) {
$scope.init = function() {
return $scope.sourceLanguage = null;
};
$scope.parseLanguage = function() {
return TranslateService.detectLanguage($scope.myWords).then(function(response) {
console.log($scope.sourceLanguage);
$scope.sourceLanguage = response.data.sourceLanguage;
return console.log($scope.sourceLanguage);
});
};
return $scope.init();
}
]);
The console logs show the right data. But in the view, sourceLanguage never updates. Why would this be?
In case the promise you are evaluating is not part of the Angular context you need to use $scope.$apply:
$scope.parseLanguage = function() {
TranslateService.detectLanguage($scope.myWords).then(function(response) {
$scope.$apply(function() {
$scope.sourceLanguage = response.data.sourceLanguage;
});
});
};
I'm displaying a message when the user clicks on the button.
I want to show this message for 10 seconds and then hide it.
My code is the following:
<script>
function Ctrl($scope, $window) {
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function() {
$scope.msg="hi";
};
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="greeting" />
<button ng-click="doGreeting()">click</button>
{{msg}}
</div>
You can set a variable that determines whether to show the message or not and hide it and after 10,000 seconds. You will have to inject $timeout as shown below. Then in your view you will need to wrap {{msg}} in a span in order to use ng-show
<script>
function Ctrl($scope, $window, $timeout) {
$scope.greeting = 'Hello, World!';
$scope.showGreeting = false;
$scope.doGreeting = function() {
$scope.msg="hi";
$scope.showGreeting = true;
$timeout(function(){
$scope.showGreeting = false;
}, 10000);
};
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="greeting" />
<button ng-click="doGreeting()">click</button>
<span ng-show="showGreeting ">{{msg}}</span>
</div>
The way I did to show a message for a certain time in angularjs was using AngularJS-Toaster library
To use the library follow this steps:
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.9/toaster.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>
<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.9/toaster.min.js"></script>
Add toaster container directive:
<toaster-container></toaster-container>
Prepare the call of toaster method:
// Display an info toast with no title
angular.module('main', ['toaster'])
.controller('myController', function($scope, toaster) {
$scope.pop = function(){
toaster.pop('success', "title", "text");
};
});
Call controller method on button click:
<div ng-controller="myController">
<button ng-click="pop()">Show a Toaster</button>
</div>
Here you can see a Plunker showing many kinds of toasts showing differents messages
Add the $timeout dependency to your controller. Here's a fiddle:
<div ng-app>
<div ng-controller="Ctrl">
<input type="text" ng-model="greeting" />
<button ng-click="doGreeting()">click</button>
<div class="ng-hide" ng-show="showMessage">{{msg}} {{ greeting }}</div>
</div>
</div>
function Ctrl($scope, $window, $timeout) {
var messageTimer = false,
displayDuration = 5000; // milliseconds (5000 ==> 5 seconds)
$scope.showMessage = false;
$scope.msg = "hi";
$scope.doGreeting = function () {
if (messageTimer) {
$timeout.cancel(messageTimer);
}
$scope.showMessage = true;
messageTimer = $timeout(function () {
$scope.showMessage = false;
}, displayDuration);
};
}