Hi,
I resolved it by changing the directive's restrict type to "A"
and transclude to 'element' but this evolved new bug that the attributes
get duplicated to the top level div of the template.
Below is the sample html output when making above changes:
*Output html:*
<div class="inputWrap form-control ng-isolate-scope ng-pristine ng-valid"
ng-class="{'has-error': errors.length>0, 'collapsedError': !showError}"
*type="text"
id="saveReportName" data-ng-model="savedReport.enteredName"
ng-change="savedReport.clearError()" autocomplete="off"
file-name-validator="" notify="savedReport.notifyFileName()"
maxlength="120" data-inputwrap1="" errors="formErrors.saveReport.name"
label="Report name"*>
<div class="errorMessage" ng-show="showError"><i class="fa fa-times-circle
closeErrorBtn" ng-hide="hideClose" ng-click="showError = false"></i><label
class="ng-binding">Report name</label><!-- ngRepeat: error in errors -->
</div>
<div ng-transclude="">
<input type="text" class="form-control ng-scope" id="saveReportName"
data-ng-model="savedReport.enteredName"
ng-change="savedReport.clearError()" autocomplete="off"
file-name-validator="" notify="savedReport.notifyFileName()"
maxlength="120" data-inputwrap1="" errors="formErrors.saveReport.name"
label="Report name">
</div>
</div>
Please see the div attributes underlined and the input attributes they were
duplicated. I resolved it by manually replacing it in the link function,
but this does'nt seems to be correct approach.
So can any one help me transclude not duplicating the attributes???
On Monday, August 25, 2014 11:07:23 AM UTC+5:30, Sudeep Singh Gusain wrote:
>
> Hi,
>
> Below is my code for my custum directive
>
> (function (global, undefined) {
> 'use strict';
>
> // used to render the styled checkboxes
> global.adminControllers.directive("inputwrap", ["$compile", function
> ($compile) {
>
> return {
> restrict: "E",
> transclude: true,
> replace: true,
>
> scope: {
> errors: "=",
> label: "@",
> hideClose: "@"
> },
>
> template: '<div class="inputWrap" ng-class="{\'has-error\':
> errors.length>0, \'collapsedError\': !showError}">' +
> '<div class="errorMessage"
> ng-show="showError">' +
> '<i class="fa fa-times-circle
> closeErrorBtn" ng-hide="hideClose" ng-click="showError = false"></i>' +
> '<label>{{label}}</label>' +
> '<div ng-show="errors" ng-repeat="error in
> errors">{{ error }}</div>' +
> '</div>' +
> '<div ng-transclude></div>' +
> '</div>',
>
> link: function (scope, elm, attrs)
> {
> var showError = function () {
> scope.$apply(function () {
> scope.showError = true;
> });
> };
>
> *elm.find("input, select, textarea").on("focus",
> showError).on("select2-focus", showError);*
>
> scope.$watch("errors", function () {
> // if the error was closed manually, don't reopen
> automatically
> if (scope.showError === undefined)
> scope.showError = scope.errors &&
> scope.errors.length > 0;
> });
> }
>
> }
> }]);
>
> }(window));
>
> *Html for the directive:*
>
> <inputwrap errors="formErrors.saveReport.name" label="Report name">
> <input type="text"
> class="form-control"
> id="saveReportName"
> " />
> </inputwrap>
>
>
> Please focus on the line I have marked bold and underline. In Chrome,
> Firefox, IE9 and > it is working fine. In IE8 this line is not working
> since it is not able to find any element in it.
>
> Thanks in advance if some one have any solution for it.
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
