Angularjs - Call Directive after ng-init function completes - javascript

I am trying to call a Function in ng-init i my html file.
That function makes a API call and gives the data. I assigned that data to a scope variable and pass that scope variable to directive.
Controller is hitting first. But before APIi call completes directive got hitted. So the scope variable which i am passing to controller is as undefined.
App.directive('foldertree', function () {
return {
restrict: 'A',
scope: {
'inputfromapicall': '=',
'fileName': "="
},
link: function (scope, element, attrs, ngModelCtrl) {
return $timeout(function() {
$('#divid').fileTree({
root: scope.inputfromapicall, //undefined
script: '/project/current/source/data/jqueryFileTree.jsp',
expandSpeed: 1,
collapseSpeed: 1,
multiFolder: false
}, function (file) {
scope.fileName = file;
scope.$apply();
});
});
}
};
});
Above is my directive code
Sorry for posting the vague question.Hope some one help me with the fix.

As MajoB mentioned in comment scope.$watch done the trick. Here is my updated directive code.
automateOnApp.directive('foldertree', ['$timeout', function($timeout){
return {
restrict: 'A',
scope: {
'inputfromapicall': '=',
'fileName': "="
},
link: function (scope, element, attrs, ngModelCtrl, controller) {
scope.fileName = '';
return $timeout(function() {
scope.$watch(function () {
return scope.inputfromapicall;
}, function(newVal) {
if(!angular.isUndefined(scope.inputfromapicall)){
$('#divid').html('');
$('#divid').fileTree({
root: newVal,
script: '/project/current/source/data/jqueryFileTree.jsp',
expandSpeed: 1,
collapseSpeed: 1,
multiFolder: false
}, function (file) {
scope.fileName = file;
scope.$apply();
});
}
});
});
}
};
}]);
Hope it helps someone in Future

Related

AngularJS override directive controller function

Here is the problem. I have some 3rd party directive called main-directive.
app.directive('mainDirective', function() {
return {
scope: {
foo: '&'
// attrs
},
controller: function($scope) {
$scope.click = function() {
window.alert($scope.foo());
}
},
template: '<button ng-click="click()">Click me</button>'
}
});
So I want to make my own directive called parent-directive which assign application specific default values to third party directive attributes.
app.directive('parentDirective', function() {
return {
scope: {
foo: '&?',
attr2: '='
// lots of attrs
},
controller: function($scope) {
$scope.attr1 = "some default value"
$scope.foo = function() {
return "not overrided"
}
if (this.foo) {
$scope.foo = this.foo
}
},
template: '<div class="some-styling"><main-directive foo="foo()" attr1="attr1" attr2="attr2"></main-directive></div>'
}
});
What if I want to make another child-directive that keeps parent-directive logic.
Overloading attribute is easy i can use "compile" function. But what about overriding functions is it possible?
app.directive('childDirective', function() {
return {
scope: false,
require: 'parentDirective',
link: function(scope, element, attr, controller) {
controller.foo = function() {
return "overrided";
}
},
compile: function(element, attr) {
attr.attr2 = "attr2";
}
}
});
Whole thing can be easily done by using child scope instead of isolated.
Or by using extending by template. But if I extends directive with template I would have to copy parent "scope" and "template" definition to child-directive and forward all the non-default attributes this doesn't seem like an elegant solution.
So the key question, is there a way to override parent-directive function using isolated scope without forwarding attributes.
Here is the DEMO
Ok, I have done some research and it turns out that there can be several approaches there
Scope inheritance
Since child-directive is not creating own scope it just creating new methods at parent-directive parent scope. So we can modify attributes during compile and specify overridden foo method.
app.directive('parentDirective', function() {
return {
scope: {
fooImpl: '&?',
// lots of attrs
},
controller: function($scope) {
$scope.foo = function() {
if ($scope.fooImpl) {
return $scope.fooImpl();
}
return "not overrided";
}
},
template: '<div class="some-styling"><main-directive foo="foo()"></main-directive></div>'
}
});
app.directive('childDirective', function() {
return {
scope: false,
require: 'parentDirective',
controller: function($scope) {
$scope.foo = function() {
return "overrided";
}
},
compile: function(element, attr) {
attr.fooImpl = "foo()";
}
}
});
Here is the DEMO1
Add to isolated scope
Angular provides special function. That can get isolated scope from element. So we can override our method during linking phase.
app.directive('parentDirective', function() {
return {
scope: {
fooImpl: '&?',
// lots of attrs
},
controller: function($scope) {
$scope.foo = function() {
if ($scope.fooImpl) {
return $scope.fooImpl();
}
return "not overrided";
}
},
template: '<div class="some-styling"><main-directive foo="foo()"></main-directive></div>'
}
});
app.directive('childDirective', function() {
return {
scope: false,
require: 'parentDirective',
link: function(scope, element, attr) {
var innerScope = angular.element(element[0]).isolateScope();
innerScope.foo = function() {
return "overrided";
}
}
}
});
Here is the DEMO2
Controller method
If we use controllerAs syntax. That means we exposing controller object variables as a scope. We can override function in child directive during linking phase.
app.directive('parentDirective', function() {
return {
scope: {
fooImpl: '&?',
// lots of attrs
},
controller: function($scope) {
var vm = this;
vm.foo = function() {
return "not overrided";
}
},
controllerAs : 'vm',
template: '<div class="some-styling"><main-directive foo="vm.foo()"></main-directive></div>'
}
});
app.directive('childDirective', function() {
return {
scope: false,
require: 'parentDirective',
link: function (scope, element, attr, controller) {
controller.foo = function() {
return "overrided";
}
}
}
});
Here is the DEMO3
Transclusion
Practically you can do the same thing with seperate parent and child directive and using transclusion. But anyway it would be combination of above approaches. Thanks for "Extending an existing directive in AngularJS"

angularjs: multiple binded functions in directive

I have a function in my directive that is bound to a function in my controller as follows:
HTML:
<div graph-visualization data="graphdata" type="graphtype" data-method="watchMonth" timespan="timespan" id="graph" ng-if="!loading">
</div>
Directive:
app.directive('graphVisualization', function() {
return {
restrict: 'A',
scope: {
data: '=',
type: '=',
timespan: '=',
monthFilter: '&method'
},
link: function(scope, element, attrs) {
scope.updateMonth = function() {
var func = scope.monthFilter();
func(scope.month)
}
scope.$watchGroup(['data', 'timespan', 'type'], function(newval, oldval) {
scope.month = 'something'
scope.updateMonth()
})
})
Controller:
$scope.watchMonth = function(value) {
//handle value passed from directive
}
As you can see I have a binded function 'watchMonth' in my controller which is called from the directive.
Now, I want to add another function in my directive which is binded to some other function in my controller. How do I go about it? Can't seem to get my head around it.
What I want is that I am handling a click in my directive and getting a value based on that click. Now, I want to pass this value to the controller which will modify 'graphdata'(on which I have supplied a watchgroup) in the controller.
In the html add the methods as shown:
month-filter="watchMonth()" second-function="function()"
Be sure to add parentheses at the end of the function name
<div graph-visualization data="graphdata" type="graphtype" month-filter="watchMonth()" second-function="secondFunction()" timespan="timespan" id="graph" ng-if="!loading">
app.directive('graphVisualization', function() {
return {
restrict: 'A',
scope: {
data: '=',
type: '=',
timespan: '=',
monthFilter: '&',
secondFunction: '&'
},
link: function(scope, element, attrs) {
scope.updateMonth = function() {
var func = scope.monthFilter();
func(scope.month)
}
scope.$watchGroup(['data', 'timespan', 'type'], function(newval, oldval) {
scope.month = 'something'
scope.updateMonth()
})
})
added a plunker, maybe that'll help
http://plnkr.co/edit/cISSlQpQF6lFQrDdbTg4?p=preview

Angularjs directive

I want to have an attribute directive a bit similar to ng-model. I just want to additionally bind an input fields value to a scope variable (just in one direction input field -> scope variable). So I have just tried this directive but I can not get the directive called anyway.
script:
.directive('passivemodel', function () {
return {
restrict: "A",
scope: {
passivemodel: '='
},
link: function (scope, element, attrs) {
scope.$watch('passivemodel', function(newPassivemodel, oldPassivemodel) {
console.log("passive model", newPassivemodel);
});
}
};
})
html:
<input data-passivemodel="keyword">
Edit:
Hmmm .. based on vilo20 answer I am running into a very strange behavior.
while this code is working very well:
<input data-ng-model="keyword" data-passivemodel="keyword">
this one does not (note the value of passivemodel):
<input data-ng-model="keyword" data-passivemodel="keyword2">. Sure I have defined the variable in the controller.
Controller:
.controller('SearchController', function($scope, $routeParams, $search) {
$scope.search = new $search();
$scope.keyword = "";
$scope.keyword2 = "";
})
Edit2: here is a fiddle http://jsfiddle.net/HB7LU/12107/
try this:
.directive('passivemodel', function () {
return {
restrict: "A",
scope: {
passivemodel: '='
},
link: function (scope, element, attrs) {
console.log("passive model", scope.passivemodel);
$scope.$watch('passivemodel', function(newPassivemodel, oldPassivemodel) {
//put your logic when passivemodel changed
});
}
};
})
Hope it helps
Edit: Here is a plunker http://plnkr.co/edit/T039I02ai5rBbiTAHfzv?p=preview
Use the scope attribute:
.directive('passivemodel', function () {
return {
restrict: "A",
scope: {
"passivemodel": "="
},
link: function (scope, element, attrs) {
console.log("access passivemodel: ", scope.passivemodel);
}
};
})
Finally it was as simple as that:
.directive('modelRed', [function(){
return {
require: 'ngModel',
restrict: 'A',
scope: {},
link: function (scope, element, attrs, ngModel) {
scope.$watch(function () {
return ngModel.$modelValue;
}, function(newValue) {
scope.$parent[attrs.modelRed] = newValue;
//console.log(attrs.modelRed, newValue, scope);
});
}
}
}])
And in the html:
<p><input type="text" data-ng-model="testInput" data-model-red="redInput">{{redInput}}</p>
Of course you have to define testInput and redInput in the $scope object.

How to implement a disable when loading directive

Hi I have a variable on my scope named loadingdata. It will have the values true or false to determine if data is loading or not. I would like to put an attribute on an element to disable it if data is loading. Here is the code I already have but it is not working:
module.directive('disableWhenLoadingData', function () {
return {
restrict: 'A',
scope: {},
link: function ($scope, element, attrs) {
$scope.$watch('loadingData', function(newValue, oldValue) {
element.attr('disabled', newValue);
});
}
};
});
any ideas
You can use Angular's own ngDisabled directive instead of writing your own.
Service:
module.factory('GetDataService', function ($http) {
return {
getCustomers: function() {
return $http({ url: '/someurl', method: 'GET'});
}
}
});
Directive:
module.directive('disableWhenLoadingData', function (GetDataService) {
return {
restrict: 'A',
scope: {},
link: function ($scope, element, attrs) {
$scope.loadingData = true;
GetDataService.getCustomers().success(function (data) {
$scope.loadingData = false;
});
}
};
});
Generally I set $scope.loading in my controller, and my button or whatever i set ng-disabled.
In my controller:
$scope.loadData = function () {
$scope.loading = true;
$http
.get('url')
.success(function (ret) {
$scope.loading = false;
});
}
In my view:
<button ng-disabled="loading" ng-click="loadData()">{{loading? 'loading Data' : 'Submit'}}</button>

Parser function does not get called for change in input textbox

I am new to parsers and formatters. I have a directive that will be doing validation on change of the model.One way to do this is the $watch but from what I understand that is not a good way since it allows the model to be updated.
So I was looking at parsers and tried this code
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
require: 'ngModel',
scope: {
},
link: function($scope, elem, attr, ctrl) {
console.debug($scope);
ctrl.$formatters.push(function(value) {
console.log("hello1");
return value;
});
ctrl.$parsers.unshift(function(value) {
debugger;
console.log("hello");
return value;
});
}
};
});
But the parser function is never called. The formatter is called once. Please see the plunkr .Can anyone tell me what I am doing wrong ,why is the parser function not getting called when i type in the textbox ?
This is a late response, but for reference:
I think you where missing the "glue" that will call the $parsers while ui changes occurs. This should be something like:
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
require: 'ngModel',
scope: {
},
link: function($scope, elem, attr, ctrl) {
console.debug($scope);
ctrl.$formatters.push(function(value) {
console.log("hello1");
return value;
});
ctrl.$parsers.unshift(function(value) {
return value;
});
scope.$watch('directive model here', function() {
ctrl.$setViewValue(<build model from view here>);
});
}
};
});
For a full reference please see this (awesome) post.
Your link function is not called because the associated DOM element is not changing, just the model is. This works:
HTML:
This scope value <input ng-model="name" my-directive>
JS:
app.directive('myDirective', function($compile) {
return {
require: 'ngModel',
link: function($scope, elem, attr, ctrl) {
ctrl.$parsers.unshift(function(value) {
console.log("hello");
});
}
};
});
See here for more on when the link function is called.

Categories