How can I access a directive's ngModelController from another directive?
The scenario
I'm creating a type ahead widget, which is composed of a typeAhead directive and autoCompletePopUp directive.
AutoCompletePopUp directive will interact with the typeAhead using typeAhead's controller.
But I don't know how to call typeAhead's $setViewValue from autoCompletePopUp when an item is selected.
Why not just add a function to the controller for typeAhead that calls $setViewValue on itself. In the context of typeAhead's controller you should have access to the scope. You can put the ngModelController for typeAhead on the scope if needed. Something like this:
angular.module("myModule").directive("typeAhead", function() {
return {
require: "ngModel",
controller: function($scope) {
this.setValue = function(value) {
$scope.ngModelController.$setViewValue(value);
};
},
link: function(scope, element, attributes, ngModelController) {
scope.ngModelController = ngModelController;
},
};
});
angular.module("myModule").directive("typeAhead", function() {
return {
require: "typeAhead",
link: function(scope, element, attributes, typeAheadController) {
scope.someAction = function(value) {
typeAheadController.setValue(value);
};
},
};
});
(protect against minification and move controllers into separate objects / files as desired; done inline here for convenience)
Related
I am creating drag and drop functionality by creating a <dragItem> directive and a <droptTraget> directive, but I don't understand yet how to work with the inner and out scope in this way.
Here are my directives. The events triggers the functions properly, I just want the on dragstart event to store a value of the drag element and the drop event to trigger the function testAddSet() which adds the drag value to my model.
drag
angular.module('app.directives.dragItem', [])
.directive('dragItem', function(){
return { // this object is the directive
restrict: 'E',
scope: {
excercise: '='
},
templateUrl: "templates/dragTile.html",
link: function(scope, element, attrs){
element.on('dragstart', function (event) {
var dataVar = element.innerText;
// It's here that I want to send a dataVar to the $scope
});
}
};
});
drop
angular.module('app.directives.dropTarget', [])
.directive('dropTarget', function(){
return { // this object is the directive
restrict: 'E',
scope: {
day: '='
},
templateUrl: "templates/calDay.html",
link: function(scope, element, attrs){
element.on('drop', function (event) {
event.preventDefault();
// It's here that I'd like to take the value from the drag item and update my model
testAddSet() // doesn't work
$parent.testAddSet() // doesn't work
});
element.on('dragover', function (event) {
event.preventDefault();
});
}
};
});
Since you are using isolate scope, you need to define an attribute for the function binding.
angular.module('app.directives.dropTarget', [])
.directive('dropTarget', function(){
return { // this object is the directive
restrict: 'E',
scope: {
day: '=',
//Add binding here
testAddSet: '&'
},
templateUrl: "templates/calDay.html",
link: function(scope, element, attrs){
element.on('drop', function (event) {
event.preventDefault();
//Invoke the function here
scope.testAddSet({arg: value, $event: event});
});
element.on('dragover', function (event) {
event.preventDefault();
});
}
};
});
In your template, connect the function using the directive attribute.
<drop-target test-add-set="fn(arg, $event)" day="x"></drop-target>
For more information on isolate scope binding, see AngularJS $compile Service API Reference - scope.
I recommend that the event object be exposed as $event since that is customary with AngularJS event directives.
$event
Directives like ngClick and ngFocus expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object.
-- AngularJS Developer Guide -- $event
I think the easiest way to get your cross-directive communication is to make a scope variable on the host page and then pass it double-bound ('=') to both directives. That way, they both have access to it as it changes.
I have a confirm box which I want to attach another directive to called confirmBoxToggle, but I'm unable to share the same controller instance in order for it to work. I've looked at multiple examples and also read the docs to see if I'm doing something crazy, but the only thing I can see is that I don't declare my controller inside the directive but rather giving a reference to it. But I can't see this being the issue.
I get this error when doing this:
Controller 'confirmBox', required by directive 'confirmBoxToggle', can't be found!
What am I doing wrong?
The box directive:
core.directive('confirmBox', [function() {
return {
scope: {},
controller: 'ConfirmBoxCtrl',
controllerAs: 'confirmBox',
templateUrl: 'app/views/components/core/confirmation-box.html',
link: function(scope, element, attrs, ctrl) {
}
};
}]);
The toggle directive:
core.directive('confirmBoxToggle', [function() {
return {
scope: {},
require: '^confirmBox',
link: function(scope, element, attrs, ctrl) {
element.on('click', function() {
ctrl.toggleBox();
});
}
};
}]);
The controller for both directives:
core.controller('ConfirmBoxCtrl', [function() {
var confirmBox = this;
confirmBox.toggleBox = function() {
confirmBox.isActive = !confirmBox.isActive;
};
}]);
I use the directives like this:
<confirm-box></confirm-box>
<span confirm-box-toggle>Delete</span>
Controller confirm or confirmBox can't be found?
Do you use that controller elsewhere, and does it work on it's own?
Basically you used require: '^confirmBox' that means while using confirmBoxToggle directive, it must be wrap with confirmBoxdirective(should be there in parent element as ^) so that you could access to the confirmBox link function 4th parameter.
HTML
<confirm-box>
<span confirm-box-toggle>Delete</span>
</confirm-box>
Also you can't have templateUrl inside your confirmBox directive, which will replace your <span confirm-box-toggle>Delete</span> html by the template loaded form templateUrl.
Demo Plunkr
Given that I have the following two directives.
1: Angular UI select - this directive uses isolate scope.
2: myDirective - in my custom directive i also use isolate scope to access the value of ngModel
I am getting the Multiple directive error cannot share isolate scope. This is how I declare the isolate scope in my directive.
require: 'ngModel',
scope: {
modelValue: "=ngModel"
},
link: function (scope, el, attrs, ctrl) {
And i use it like:
<ui-select myDirective multiple ng-model="GroupsModel" theme="select2" ng-disabled="disabled" style="width: 300px;" hidden-text-box ">
<ui-select-match placeholder="groups">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in Groups ">
{{color}}
</ui-select-choices>
</ui-select>
My question is, how I can get access to the ngmodel value from my custom directive if multiple directives cannot be used together on 1 element, is there a work around that will still keep the binding ?
Updated
I cannot access the required ng models value in the following function of my directive if I don't use empty the scope: {},
scope.reset = function () {
var modelValue =ctrl.$viewValue;
$timeout(function () {
el[0].focus();
}, 0, false);
};
Here is my directive:
var app = angular.module('app');
app.directive('resetField', [
'$compile', '$timeout', '$http', function ($compile, $timeout, $http) {
return {
require: 'ngModel',
link: function (scope, el, attrs, ctrl) {
// compiled reset icon template
var template = $compile('<i ng-show="enabled" ng-mousedown="reset()" class="fa fa-floppy-o" style="padding-left:5px"></i>')(scope);
el.after(template);
scope.reset = function () {
var modelValue =ctrl.$viewValue;
$timeout(function () {
el[0].focus();
}, 0, false);
};
el.bind('input', function() {
scope.enabled = !ctrl.$isEmpty(el.val());
})
.bind('focus', function() {
scope.enabled = !ctrl.$isEmpty(el.val());
scope.$apply();
})
.bind('blur', function() {
scope.enabled = false;
scope.$apply();
});
}
};
}
]);
If you are using isolated scope only to get the ng-model for the select, you can do it without using isolated scope.
In the link function just use scope[attrs.ngModel], you can even put a watch over it (as long as the ngmodel is a object property ng-model=obj.prop1)
You can use multiple directives on one element, the issue is that applying multiple isolated scopes on one element is invalid, you can use require to require another directive in myDirective:
angular.directive('myDirective', [function(){
return {
scope: false,
require: 'ngModel',
link: function(scope, element, attr, ctrl){
scope.modelValue = ctrl.$viewValue;
}
}
}])
Use 'require' in the directive to be able to access the controller of another directive. Then you are able to inject that controller in the params of the directives implementation. However, you cannot use an isolate scope if you do this.
if there are two directives that you need to use, make sure that the second directive is not an isolated one.
I have a form directive that needs to communicate with a form-sections directive to tell it to change is layout. The change is triggered by a form-header directive.
<form>
<form-header></form-header>
<form-sections></form-sections>
</form>
I injected the form directive's controller in the form-header, so that the header can call the changeLayout function.
form directive:
compile: function(scope, element , attrs) {
element.find('form-sections').attr('current-view', 'tabs'); // initial layout
},
controller: function($scope, $element, $attrs) {
this.changeLayout = function(layout) {
$element.find('form-sections').attr('current-view', layout);
};
}
form-sections directive:
link: function (scope, element, attrs) {
attrs.$observe('currentView', function(currentView) {
console.log('observe:'currentView);
})
}
$observe is triggered only once, by the form directive's compile function, but not by it's controller. I tried it with an isolated scope in the form-section directive and use $watch, without any success..
Thanks as always!
Having a following template in templateUrl:
<input name="foo" ng-model="test">
directive:
app
.directive('bar', function() {
return {
link: function link(scope, element, attrs, ctrl) {
scope.$watch(scope.test, function(newVal) {
console.log(val);
});
},
restrict: 'E',
templateUrl: 'templates/foo.html'
};
});
can I two-way bind it in directive so I scope.$watch input variable?
I tried using ng-bind and ng-model, but I cannot access that variable in scope of my directive.
Edit
Added directive code.
Change:
scope.$watch(scope.test, ...
to
scope.$watch('test', ...
and it should work. The first argument to $watch is the (so called) watchExpression. It will be evaluated against the relevant scope. When using a string you can basically use everything you would also use in the views/templates.
Mind that this will break again if you start using isolated scopes.