How can pass the variable itemSelect inside my directive to my controller?
mDirective.directive('directive', function() {
return {
restrict: 'A',
scope: {
options: "="
},
templateUrl: '',
link: function(scope, element, attrs) {
.........
$(element).find('.typeY').on('change', function() {
var itemSelect = $(element).find('.typeY').val();
});
} ,
};
});
Something like
mDirective.directive('directive', function() {
return {
restrict: 'A',
scope: {
options: "=",
selected:"=",
},
templateUrl: '',
link: function(scope, element, attrs) {
.........
$(element).find('.typeY').on('change', function() {
scope.$apply(function() {
scope.selected=value; // value from the element
});
});
} ,
};
});
At html level
<div directive options='expression' selected='expressionToTheScopeProperty'/>
Related
Why my function toggleCategory function is not being triggered?
Directive
app.directive('asideFilter', function() {
return {
restrict: 'E',
scope: {
toggleCategory: '=&onToggleCategory'
},
transclude: true,
templateUrl: 'assets/directives/asideFilter/asideFilter.html',
link: function(scope, element, attrs){
}
};
});;
Directive template
<div ng-click="toggleCategory({id: 'teste'})">TEST</div>
Parent scope
$scope.onToggleCategory = function () {
console.log('onToggleCategory');
}
Parent Caller
<aside-filter toggle-category="onToggleCategory({id: 'test '})" categories="categories" />
You can call the parent controller function like this also
app.directive('asideFilter', function() {
return {
restrict: 'E',
scope: {
toggleCategory: '&',
},
transclude: true,
templateUrl: 'assets/directives/asideFilter/asideFilter.html',
link: function(scope, element, attrs){
scope.toggleCategoryClick = function (value) {
scope.toggleCategory(value);
}
}
};
});
Directive template
<div ng-click="toggleCategoryClick({id: 'teste'})">TEST</div>
Directive Element
<aside-filter toggle-category="onToggleCategory({id: 'test '})" categories="categories" />
controller:
service.checkSub(function(data){
$scope.showSub = data.subscribe? false : true;
})
directive:
app.directive('showSub', function() {
return {
restrict: 'E',
replace: true,
scope: {
showSub: '=show'
},
templateUrl: '<div data-ng-show="show">test</div>',
link: function(scope, element, attrs) {
console.log(scope.showSub); // undifined
if(scope.showSub) {
scope.show = true;
}else {
scope.show = false;
}
}
}
});
<show-sub show="showSub"></show-sub>
why the scope.showSub in directive is undefined ,and I want to use it to control the directive? how should I do it?
The scope.showSub gives undefined, because when loading in the directive, the showSub of your controller scope isn't filled yet. What you can do to fix it:
Change templateUrl to template
Change ng-show="show" to ng-show="showSub"
Lose the link function (it is not needed, as you can directly bind to the scope variables in your template)
code:
app.directive('showSub', function($timeout) {
return {
restrict: 'E',
replace: true,
scope: {
showSub: '=show'
},
template: '<div data-ng-show="showSub">test</div>',
link: function(scope, elem) {
// this function isn't needed, but to show you it gives undefined due to the async call
console.log(scope.showSub); // undefined
$timeout(function(){
console.log(scope.showSub); // true
}, 1500);
}
}
});
Here is a jsfiddle
Your directive is fine but problem with the service.
service.checkSub(function(data){
$scope.showSub = data.subscribe? false : true;
})
$scope.showSub should be in parent scope.
make sure you have data in $scope.showSub
You can get value of showSub by scope.$parent.showSub
So your code will be like ..
app.directive('showSub', function() {
return {
restrict: 'E',
replace: true,
scope: {
showSub: '=show'
},
templateUrl: '<div data-ng-show="show">test</div>',
link: function(scope, element, attrs) {
console.log(scope.$parent.showSub);
if(scope.$parent.showSub) {
scope.show = true;
}else {
scope.show = false;
}
}
}
});
I have in my directive the controller and link in the following way:
myapp.directive('MyDirective', function(){
return{
restrict: 'A',
transclude: true,
scope: {
....
},
controller: function($scope) {
$scope.variable = true;
},
templateUrl: './app/templates/template.html',
link: function(scope, element, attrs){
scope.$watch('variable ', function(){
console.log("variable : " + scope.variable )
});
}
.....
I am not able to see the scope.variable in the block link. How I can resolve it?
For some reason I can't make this work based on the other examples I've seen here on SO.
Here's my directive:
(function () {
angular.module('materialDesign')
.directive('aSwitch', directive);
function directive() {
return {
templateUrl: 'elements/material/switch/switch.html',
transclude: false, // I've tried true here
restrict: 'E',
scope: {
enabled: '=',
toggleState: '=',
},
link: function(scope, element) {
element.on('click touchstart', function() {
scope.toggleState = !scope.toggleState;
});
}
};
}
})();
And the controller scope value that I want to change when toggling the switch/checkbox:
$scope.hideInactive = true;
The html:
<a-switch toggle-state="hideInactive"></a-switch>
and further down in my html page, I have this:
<div ng-show="!hideInactive">
<!-- stuff -->
</div>
EDIT:
This version is "working now", but as soon as I click my switch/checkbox a second time, the element.on fires twice, this flipping my scope value back to what it was.....basically, it's not letting me "un-check" my toggle.
angular.module('material')
.directive('aSwitch', [
'$timeout', function($timeout) {
return {
templateUrl: 'elements/material/switch/switch.html',
transclude: false,
restrict: 'E',
scope: {
enabled: '=',
toggleState: '=',
},
link: function (scope, element) {
element.on('click touchstart', function () {
$timeout(function () {
scope.toggleState.state = !scope.toggleState.state;
scope.$apply();
});
});
}
};
}
]);
EDIT and FINAL SOLUTION:
Here's the updated directive link property that fixed everything. I'd like to add that Oleg Yudovich's answer was also used (passing an object as the property instead of a true/false by itself)
link: function (scope, element) {
element.on('click touchstart', function (event) {
if (event.srcElement && event.srcElement.id && event.srcElement.id === "switch") {
event.stopPropagation();
$timeout(function() {
scope.toggleState.state = !scope.toggleState.state;
});
}
});
}
Try to pass object instead of primitive variable like this:
$scope.hideInactive = {
state: false;
}
html without changes:
<a-switch toggle-state="hideInactive"></a-switch>
in your directive:
scope.toggleState.state = !scope.toggleState.state;
Reed this awesome article: https://github.com/angular/angular.js/wiki/Understanding-Scopes
You need to run digest cycle after changes in scope, because changing scope binding from event will not run angular digest cycle, you need to run it manually by doing scope.$apply()
Directive
(function () {
angular.module('materialDesign')
.directive('aSwitch', directive);
function directive($timeout) {
return {
templateUrl: 'elements/material/switch/switch.html',
transclude: false, // I've tried true here
restrict: 'E',
scope: {
enabled: '=',
toggleState: '=',
},
link: function(scope, element) {
element.on('click touchstart', function() {
$timeout(function(){
scope.toggleState = !scope.toggleState;
});
});
}
};
}
})();
Try below code:
angular.module('material').directive('aSwitch', ['$timeout', function($timeout) {
return {
templateUrl: 'elements/material/switch/switch.html',
transclude: false,
restrict: 'E',
scope: {
enabled: '=',
toggleState: '=',
},
link: function(scope, element) {
element.on('click touchstart', function() {
$timeout(function() {
scope.toggleState.state = !scope.toggleState.state;
scope.$apply();
});
});
}
};
}]);
Say I have the following two directives that work with each other
directive('parent', function() {
return {
scope: {},
require: 'ngModel',
controller: function($scope) {
this.doSomething = function() {
//How to use ngModelController here?
};
},
link: function(scope, element, attr, ngModelController) {
}
};
});
directive('child', function() {
return {
scope: {},
require: '^parent',
link: function(scope, element, attr, parent) {
parent.doSomething();
}
};
});
How can I use the ngModelController from within the controller of parent? I suppose I could do scope.ngModelController = ngModelController inside the link function but that seems hacky. Is there a better solution?
Is this any less hacky?
directive('parent', function() {
var ngModelCtrl = null;
return {
scope: {},
require: 'ngModel',
controller: function($scope) {
this.doSomething = function() {
//How to use ngModelController here?
if (ngModelCtrl) {
}
};
},
link: function(scope, element, attr, ngModelController) {
ngModelCtrl = ngModelController;
}
};
});