javascript - Add a directive in the link function of another directive -
i'm writing full suite of web controls in angularjs. now, have created first basic directive button, looks following:
officewebcontrols.directive('officebutton', ['$q', 'stylesheetinjectorservice', function($q, stylesheetinjectorservice) { return { restrict: 'e', replace: false, scope: { isdefault: '@', isdisabled: '@', api: '=', label: '@' }, template: office_button_template, /** * @description * provides controller 'officebutton' directive. in controller required methods * being stored. */ controller: ['$scope', function($scope) { }], /** * @kind directive caller * * @param scope scope passed directive. * @param element element on directive being applied. * @param attributes attributes applied on element on directive * applied. * @param controller controller directive. */ link: function(scope, element, attributes, controller) { } }; }]);
please note of code removed reading purposes.
now, have directive, contains couple of buttons, amount of buttons defined through property on scope.
so have following directive:
officewebcontrols.directive('officemessagebox', ['$q', 'stylesheetinjectorservice', function($q, stylesheetinjectorservice) { return { restrict: 'e', replace: false, scope: { title: '@', message: '@', messageboxstyle: '@', messageboxbuttons: '@' }, template: office_message_box, /** * @description * provides controller 'officebutton' directive. in controller required methods * being stored. */ controller: ['$scope', function($scope) {
}],
/** * @kind directive caller * * @param scope scope passed directive. * @param element element on directive being applied. * @param attributes attributes applied on element on directive * applied. * @param controller controller directive. */ link: function (scope, element, attributes, controller) { // adds correct image defines style of button. $(messageboxstylecontainerelement).append(messageboxstyleelement); var messageboxbuttonselement = ''; var messageboxbuttonscontainerelement = $('.messagebox-buttons-container', element); // make necessary adaptations based on scope. switch (scope.messageboxbuttons) { case 'messageboxbuttons.ok': messageboxbuttonselement = '<data-office-button label="ok"></data-office-button>'; break; case 'messageboxbuttons.okcancel': messageboxbuttonselement = '<data-office-button label="ok"></data-office-button>'; messageboxbuttonselement += '<data-office-button label="cancel"></data-office-button>'; break; case 'messageboxbuttons.yesno': messageboxbuttonselement = '<data-office-button label="yes"></data-office-button>'; messageboxbuttonselement += '<data-office-button label="no"></data-office-button>'; break; case 'messageboxbuttons.yesnocancel': messageboxbuttonselement = '<data-office-button label="yes"></data-office-button>'; messageboxbuttonselement += '<data-office-button label="no"></data-office-button>'; messageboxbuttonselement += '<data-office-button label="cancel"></data-office-button>'; break; } $(messageboxbuttonscontainerelement).append(messageboxbuttonselement); } }; }]);
so, in link fuction i'm adding element data-office-button
in fact directive. now, problem that directive not compiled, data-office-button isn't replaced correct html (like defined in first template).
any idea on how can accomplished?
kind regards
it may you're using $
parse messageboxbuttonselement. try angular.element
instead.
alternatively, use template
, encode switch/case logic series of ng-if
statements.
Comments
Post a Comment