Develop Reference

AngularJS View does not update after model update

I have a <div> on my page for alert message:
<div ng-controller="PercentageOverrideController as ctrl">
<script type="text/ng-template" id="alert.html">
<div class="alert" style="background-color:#fa39c3;color:white" role="alert">
<div ng-transclude></div>
</div>
</script>
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
<button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>
In my Angular controller I have a variable $scope.alerts = [ ] and function which pushes a new alert message to an array:
$scope.showSuccess = function(){
$scope.alerts.push({type: 'success', msg: 'Threshold Overrided'});
};
$scope.showError = function(){
$scope.alerts.push({type: 'danger', msg: 'Error has been happened'});
};
After I make a request and get a response, I check in debug mode that the function was invoked and that a new value was added to the array. However it does not appear on my page.
I have a test button in my div:
<button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
If I press this button, the alert appears on the page. If I try to invoke the same function:
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
within the code:
$scope.showSuccess = function(){
$scope.alerts.push({type: 'success', msg: 'Threshold Overrided'});
$scope.addAlert();
};
but the alert does not appear on page.
I assume that I should trigger somehow the view to show that update on page. What do you think guys?
Thank you!

You can use $scope.apply()
$scope.showSuccess = function(){
$scope.alerts.push({type: 'success', msg: 'Threshold Overrided'});
$scope.addAlert();
$scope.apply();
};

Instead of <div ng-controller="PercentageOverrideController as ctrl">
try <div ng-controller="PercentageOverrideController">

you need to run a digest loop.
$scope.$apply()
or alternatively
$scope.$digest()
should do it.

How do I get $emit to controller from directive built html

I'm having difficulty figuring this out. I have a directive building html from promise data. For each row, it's adding buttons for CRUD operations. I do not know how to get the button event to trigger in my controller. Regardless of how my controller is set up, how can I get the event to register in my controller? I am currently trying $emit, but nothing seems to happen.
Directive generated html:
controls = controls+'<button type="button" data-tooltip-placement="bottom" data-tooltip="'+action.name+'" ng-click="$emit(&apos;'+action.broadcaster+'&apos;,'+rowId+')" name="'+action.name+'" class="btn btn-xs btn-default ng-scope"><i class="'+action.icon+'"></i> </button>'
How it looks in Chrome tools:
<button type="button" data-tooltip-placement="bottom" data-tooltip="delete" ng-click="$emit('removeOrgCourse',134)" name="delete" class="btn btn-xs btn-default ng-scope"><i class="fa fa-trash-o"></i> </button>
and my controller listener:
$scope.$on('removeOrgCourse', function( event, data ){
console.log(data);
});
UPDATE:
Just changed the ng-click to console.log("click") and nothing happened. So the issue is that ng-click is not registering;

While you can use events in angular to achive that, one other option is to use & expression scope binding to pass controller method to directive. Example code (from egghead.io)(see working code at jsbin):
<div ng-app="phoneApp">
<!-- we've replaced the use of $scope with the preferred "controller as" syntax. see:http://toddmotto.com/digging-into-angulars-controller-as-syntax/ -->
<div ng-controller="AppCtrl as appctrl">
<div phone dial="appctrl.callHome(message)"></div>
<div phone dial="appctrl.callHome(message)"></div>
<div phone dial="appctrl.callHome(message)"></div>
</div>
Controller:
app.controller("AppCtrl", function() {
var appctrl = this;
appctrl.callHome = function(message) {
alert(message);
};
});
And directive:
app.directive("phone", function() {
return {
scope: {
dial: "&"
},
template: '<input type="text" ng-model="value">' +
'<div class="button" ng-click="dial({message:value})">Call home!</div>'
};
});

Maybe you have to use $broadcast, depends if the controllers are on the same level or who's over who.
Working with $scope.$emit and $scope.$on
http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/
in the secon link you can put the $emit and $broadcast in the same controller and see whad do you catch in you $on

Call an AngularJS function when an NFC tag is read?

I've written a small demo application using Ionic and the phonegap-nfc which can read the unique ID from an NFC tag.
Now, I'm trying to create a list that shows previous read events. An event should be added to this list a tag is read.
I have a list which can have events added to it. The code looks like this:
<ion-view view-title="Usage History">
<ion-content>
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/tasks/{{task.id}}">
<img ng-src="{{task.pic}}">
<h2>{{task.name}}</h2>
<p>{{task.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(task)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
<script id="new-task.html" type="text/ng-template">
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.name">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>
</ion-content>
</div>
</script>
</ion-content>
</ion-view>
The controller looks like this:
.controller('TasksCtrl', function($scope, $ionicModal) {
$scope.tasks= [];
// Create and load the Modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// Called when the form is submitted
$scope.createTask = function(task) {
$scope.chats.push({
name: task.name
});
$scope.taskModal.hide();
task.name= "";
};
// Open our new task modal
$scope.newTask = function() {
$scope.taskModal.show();
};
// Close the new task modal
$scope.closeNewTask = function() {
$scope.taskModal.hide();
};
$scope.remove = function(task) {
tasks.remove(task);
};
})
All of this works fine. You have a button which opens up a modal where you can add a task. Pressing the button closes the modal and the task is now in the list.
However, I want to automatically create a task when a NFC tag is read. I'm a beginner using Angular, so I don't know how to replace the "ng-click" action with something else that corresponds to a NFC action with phonegap-nfc.
The controller for the NFC events looks like this:
.controller('MainController', function ($scope, nfcService) {
$scope.tag = nfcService.tag;
$scope.clear = function() {
nfcService.clearTag();
};
})
.factory('nfcService', function ($rootScope, $ionicPlatform) {
var tag = {};
$ionicPlatform.ready(function() {
nfc.addTagDiscoveredListener(function (nfcEvent) {
console.log(JSON.stringify(nfcEvent.tag, null, 4));
$rootScope.$apply(function(){
angular.copy(nfcEvent.tag, tag);
// if necessary $state.go('some-route')
});
}, function () {
console.log("Listening for tags.");
}, function (reason) {
alert("Error adding NFC Listener " + reason);
});
nfc.addMimeTypeListener('', function (nfcEvent) {
console.log(JSON.stringify(nfcEvent.tag, null, 4));
$rootScope.$apply(function(){
angular.copy(nfcEvent.tag, tag);
// if necessary $state.go('some-route')
});
});
});
return {
tag: tag,
clearTag: function () {
angular.copy({}, this.tag);
}
};
});
How can I perform this?

Your nfcService is already listening for the tagDiscovered event so you just need to let the TaskCtrl know that something happened. To do that you have a couple of options
Use events / broadcast
a. In nfcService
$rootScope.$emit('tagFound', tag);
b. In TaskCtrl
$rootScope.$on('tagFound', function(tag) {
newTask();
});
Register a callback function
a. Add function in nfcService
var cb = null;
this.registerListener = function (callback){
this.cb = callback;
}
// inside addTagDiscoveredListener
...
cb.call(tag)
b. in taskCtrl
// inject service as nfcService
nfcService.registerListener(myCallback)
function myCallback(tag) {
newTask();
}
Go to a new state
// in nfcService
$state.go('/tasks/add');
I usually do option 2 but don't forget to unregister to unblock garbage collection. Services shouldn't care about states though so option 3 is not the best way imho

ng-click does not work

I'm programming a single-page web application, mostly using the AngularJS framework, and am encountering a problem while using the ng-click directive.
This directive actually does nothing upon click. The linked method is not called (I can't debug it).
Below the code in question:
template file:
<div ng-controller="BonusCtrl as bonusManager">
<!-- [...] -->
<button style="margin-top: 5px"
class="btn btn-success" ng-click="add()"><i class="fa fa-plus"/> Règle de calcul</button>
<!-- [...] -->
</div>
controller:
idServerApp.controller('BonusCtrl', ['$scope', 'webService', 'math', 'DATERANGE_OPTIONS', function ($scope, webService, math, DATERANGE_OPTIONS) {
$scope.add = function() {
console.log('foo'); // no call
var newItem = {
brandId: undefined,
days: 0,
priceMinEVAT: 0,
bonus: 0
};
$scope.rules.push(newItem);
};
Do you have any idea of the problem?
Edit 1
I tried to replace bonusManager.add() by add() and BonusCtrl.add().
I then tried to replace $scope by this, or to remove the controllerAs.
Complete JSFiddle (using some of my services)
Edit 2
Thanks for your answers. I found the solution myself, and it was crappy.
I forgot a closing div tag in the HTML template, so the controller was not defined.

I get your code and made an running example with two cases.
First one using BonusCtrl
$scope.add = function () {...}
ng-click="add()"
And second with bonusManager
this.add = function () {...}
ng-click="bonusManager.add()"
For me it should works just fine. Please let me know if you have any other issues.
var app = angular.module('myapp',[]);
app.controller('BonusCtrl', ['$scope', function ($scope) {
$scope.add = function() {
console.log('Hey you\'ve just invoked add() function!'); // no call
var newItem = {
brandId: undefined,
days: 0,
priceMinEVAT: 0,
bonus: 0
};
};
this.add = function () {
console.log('You can invoke function using \' bonusManager.add()'); // no call
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<h1>NG-CLICK EXAMPLE</h1>
<div ng-controller="BonusCtrl as bonusManager">
<button style="margin-top: 5px"
class="btn btn-success" ng-click="add()"><i class="fa fa-plus"/>add()</button>
<button style="margin-top: 5px"
class="btn btn-success" ng-click="bonusManager.add()"><i class="fa fa-plus"/> bounsManager.add()</button>
</div>
</div>
However you can always use your

Check the working demo: JSFidde
You are using <div ng-controller="BonusCtrl as bonusManager">, so call it like:
<button style="margin-top: 5px" class="btn btn-success"
ng-submit="bonusManager.add()"><i class="fa fa-plus"/> Règle de calcul</button>
In the controller, define this.add = function() {... instead of $scope.add = function() {.... Because the keyword as will call a new BonusCtrl() under the hood.

If you use $scope than you don't need construction ControllerAs, just use
<div ng-controller="BonusCtrl">
and submit function ng-submit="add()"
Or if you want to use ControllerAs, than use "this":
<div ng-controller="BonusCtrl as bonusManager">
ng-submit="BonusCtrl.add()"
But in your controller have to be "this" instead of $scope:
`
this.add = function() {
`
Try it.

If you are using BonusCtrl as bonusManager then do as follows
Update bonusManager.add() in view and in controller write this.add instead of $scope.add() .
Otherwise just remove as bonusManager from ng -controller syntax .it will work fine.

Sharing data from directive to controller

I am trying to display the text of link on click event of each link, for that i have written one directive 'showtext' inside which i gets text of the link, howerver i am unable to pass that value through function $scope.$apply("setMessage($element.text)").I also try $scope.message = $element.text inside directive but still its not working.plz help
<div ng-controller="menu">
<a href="#" showtext>Click</a>
<a href="#" showtext>Click1</a>
<a href="#" showtext>Click2</a>
<button showtext>OK</button>
<p ng-model="message">You say {{message}}</p>
</div>
var app = angular.module('Demo',[]);
app.factory('shared',function(){
});
app.controller('menu',function($scope){
$scope.message = "" ;
$scope.setMessage = function(msg){
$scope.message = msg;
}
});
app.directive('showtext',function(){
return {
link: function($scope,$element){
$element.bind('click',function(){
console.log($element.text());
$scope.$apply("setMessage($element.text)");
});
}
}
});

If you replace
$scope.$apply("setMessage($element.text)");
with
$scope.$apply(function () {
$scope.setMessage($element.text())
});
everything works fine.