I'm using ng-bind-html of AngularJS. I have to initialize a plugin after my Binding function is over. So I would like to know if there is a method or a function to do that work ?
Thanks for you answers !
One way you can do this is initialise a $watch event over the variable you are using in your 'ng-bind'. Let m explain:
Suppose you have a span with an ng-bind like this:
<span ng-bind="val"></span>
Now, 'ng-bind' works in a way that whenever 'val' changes(within the digest cycle) it updates the value of the span, that is, it keeps a 'watch' on the 'val'. Similarly, we can use our own watch on the 'val' in the controller like this:
$scope.val; //your binded variable
$scope.$watch('val', function(newval, oldval) {
//here you can initialise your plugin and also access the old and new values of 'val'
})
Related
Basically I have created a function to update a scope variable
// controller.js
$scope.variable = 0;
$scope.$watch('variable', function(){
console.log("change from watch");
});
$scope.increment = function(){
$scope.variable++;
console.log($scope.variable)
}
When I bind a key to this function,
Mousetrap.bind('j', $scope.increment)
the console.log in the browser shows that the variable is incremented when the key, in this case "j", is being pressed, but the $scope.$watch function above is never called and the console.log message "change from watch" is not fired.
When I attach a click handler, however, on the html file,
// index.html
<a ng-click="increment()">{{ variable }}</a>
The variable increases, the console.log shows that the $scope.variable is incremented and the $watch function is being fired as well.
In addition to this problem, {{ variable }} does not change when I use the key binding, yet it changes when I click on it.
My guess is that there is something lacking in Mousetrap that causes the function to fire but not in sync with AngularJS $scope?
Make sure you read about Databinding in AngularJS. Basically, in order for AngularJS to react to changes, something needs to trigger a $digest. The built-in ngClick directive does that under the hood.
When using non-AngularJS APIs (such as Mousetrap), you need to manually wrap the callback in $apply, e.g.:
Mousetrap.bind('j', () => $scope.$apply($scope.increment));
I have this function showPopupSelectTopic(subject) to call in my ng-repeat html code. But it does not work at all.
<div style="width:100%;" ng-controller="manageStudyCtrl">
<div class="div-subject" ng-repeat="subject in dataSubject" ng-click="showPopupSelectTopic(subject)">
<div class="round-button-subject-2">
<div class="subject-name-2 subject-eng" style="color:{{subject.subject_code.colour_code}}">
{{subject.subject_code.short_name}}
<div>{{subject.avg_overall_coverage | number : 0}}%</div>
</div>
<circular-progress
value = "subject.avg_overall_coverage"
max="100"
orientation="1"
radius="36"
stroke="8"
base-color="#b9b9b9"
progress-color="{{subject.subject_code.colour_code}}"
iterations="100"
animation="easeInOutCubic"
></circular-progress>
</div>
</div>
</div>
I want to call my showPopupSelectTopic(subject)in my controller so that I can make popup and manipulate the data.
I have done outside from ng-repeatand its working perfectly. However if I used in ng-repeat then it would not execute as expected. How to solve this issue?
My controller:
angular.module('manageStudy', [])
.controller('manageStudyCtrl', function($scope,){
$scope.showPopupSelectTopic = function(subject) {
alert(subject.chapter_id);
};
});
That's not possible due to every ng-repeat creating its own child scope. That being said, ever functio invocation will lead the child to copy some variables into its own scope. You'd have to use their parentscope or refere to the origin $scope of your controller.
ng-click="$parent.showPopupSelectTopic(subject)"
This should solve the problem. However, it's kinda dirty. A better solution would be to return your parents scope and use it in every child scope just like that. So declare a function inside of your controller (e.g. $scope.getScope) and let it simply return its $scope. Afterwards you'll be able to access it properly.
$scope.getScope = function() {
return $scope;
}
ng-click = "getScope().showPopupSelectTopic(subject)"
ng-repeat works only with an iterate able object, like array or collection. Before you open the div where you intent to repeat, the iterate able object must be in ready in the scope. Try using ngInit instead of ngClick to initialize the array before attempting to ngRepeat
I created a directive, I´m using in my template:
<data-input> </data-input>
In my directive (dataInput) I have the template (...data-input.html).
In that template the html-code says:
<input ng-change="dataChanged()" ... > ...
In the JavaScript it says:
scope.dataChanged= function(){ //change the data }
Works perfectly, but know I need to safe the changed data to a variable in my controller (that has a different scope of course).
The template, where I put the <data-input> </data-input> belongs to the final scope, I´m trying to reach.
I tried it via parameter, but it didnt work.
Thanks
Here are your options:
You can nest controllers if possible. This will create scope inheritance and you will be able to share variables of the parent.
You can use $rootscope from both the controllers to share data. Your dataChanged function can save anything to the $rootscope
You can use angular.element to get the scope of any element. angular.element('data-input').scope() returns it's cope.
This is not recommended. But there are circumstances in which people use global space to communicate between angular and non-angular code. But I don't think this is your case.
You can use Angular Watches to see changes is some variable, like this
eg:
$scope.$watch('age + name', function () {
//called when variables 'name' or 'age' changed
//Or you can use just 'age'
});
I have a directive with code
seriesClick: function (e) {
//console.log(e.category);
// use scope.$emit to pass it to controller
scope.$emit('feederValue', e.category);
},
In my controller I am using
$scope.$on('feederValue', function (evt, value) {
console.log(value);
$scope.feederFitBoundValue = value;
$scope.getFitBoundForFeederID($scope.feederFitBoundValue);
});
I want to define this function in my different directive
And I want to use it
My code
function getFitBoundForFeederID(feederFitBoundValue){
alert(feederFitBoundValue);
}
I am getting error TypeError: undefined is not a function
My project is in Angular framework I want to use logic of $emit and $on
Please suggest if any optimus solution. I just want to pass value from One directive to different directive. same time I want to pass some value from one directive to another. I want to do event triggering.
An easy fix would be to emit the event on the $rootScope and watching this event on the $rootScope as well, but i'm not sure it's the best way to do that.
To pass value from one directive to another you can use factory to create your service which holds the shared data.
app.factory("sharedDataService", function() {
return {
yourData: "anything"
};
});
I have a jsbin setup here http://jsbin.com/esofiq/1/edit
I'm getting confused by the way I think angularjs should work, I have some json data attached to a data attribute, angularjs fetches the data and creates the view. Doesn't calling $scope.mydata within the controller set 'mydata' as the model, and shouldn't it now update the view if the data within the data attribute is changed?
Is this easier to achieve in other frameworks if this isn't appropriate for angular?
I think these two will give you the idea:
How Angular uses data
How to make AJAX calls
Although this is not the usual way to do things in Angular, you can achieve what you want, adding a watch to your data
$scope.$watch(
function () { return $("#mydata").data("a");},
function(newValue) {
$scope.mydata = newValue;
}, true);
Basically we are adding a change listener to your data.
Please check this plunker, where the jquery data is changed every 2 seconds, and the div reacts to this change.