Menu
I have a directive that is used as a form control. This directive is hidden in a modal dialog and is shown when the user clicks a button to show the form. Since this directive connects to some web services, I don't want it to initialize unless the user clicks the button and the form displays (to prevent unnecessary web service calls). So, what I'm looking for is a good way for the parent controller to trigger the directive to execute some init code. Here is an example:
App.controller('parentCtrl', ['$scope', function($scope) {
$scope.onButtonClick = function onButtonClick() {
// tell directive to init somehow
};
}]);
App.directive('myDirective', function() {
return {
restrict: 'E',
scope: {},
controller: function($scope, myService) {
function init() {
myService.getData().then(function(value) { //do init stuff });
}
}
});
Assume the template for parentCtrl contains a tag .
646
To define a directive, mark the class with the decorator and provide metadata. import {Directive} from '@angular/core'; @Directive( { selector: 'my-directive', }) export class MyDirective { ... } In order to make a directive available to other components in your application, you should do one of the following:
Angular only allows directives to apply on CSS selectors that do not cross element boundaries. For the following template HTML, a directive with an input [type=text] selector, would be instantiated only on the <input type="text"> element. Angular automatically updates input properties during change detection.
We can use attribute directives to change the style of DOM elements. These directives are also used to hide or show particular DOM elements conditionally. Angular provides many built-in Attribute Directives like NgStyle, NgClass, etc. We can also create our own custom Attribute Directives for our desired functionality.
The NgModel directive works for an element supported by a ControlValueAccessor. Angular provides value accessors for all of the basic HTML form elements. For more information, see Forms. To apply [ (ngModel)] to a non-form native element or a third-party custom component, you have to write a value accessor.
Tagging your element in an ng-if will prevent the directive from initializing before it's needed. (scope.loadModal should be false by default)
<my-directive ng-if='loadModal'></mydirective>
Note: Setting scope.loadModal = false after showing the directive once will unload the directive from your DOM. Setting it back to true would reload the directive resulting in another http request.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
