I'm using official angular bootstrap directives .
I want to use of of it's popovers .
In the documentation it says that if you want to insert html inside the popover you should use popover-html, like bellow :
<button popover-html="{{getTag()}}" type="button" class="btn btn-default">Dynamic Popover</button>
<button popover-html="<a>Just fucin show me !</a>" type="button" class="btn btn-default">Click me </button>
But this will raise the following console error :
Error: [$parse:syntax] Syntax Error: Token '<' not a primary expression at column 1 of the expression [sdfsdfsdf] starting at [sdfsdfsdf].
http://errors.angularjs.org/1.4.3/$parse/syntax?p0=%3C&p1=not%20a%20primary%20expression&p2=1&p3=%3Ca%3Esdfsdfsdf%3C%2Fa%3E&p4=%3Ca%3Esdfsdfsdf%3C%2Fa%3E
You can see the plunker
Thanks
Just remove the brackets and the $compile function:
HTML:
<button popover-html="getTag()" type="button" class="btn btn-default">Dynamic Popover</button>
JS:
$scope.getTag = function(){
return '<a>sdfsdfsdf</a>';
}
Related
I am trying to implement popover functionality using Bootstrap & angularJS but popup doesn't seem to work & i don't get any errors either. Any help would be highly appreciated
<button popover-template="'popover.html'"
popover-placement="top"
popover-trigger="click"
type="button"
class="btn btn-default">
Mouse over me
</button>
I added ngAnimate & ui.bootstrap as a dependent to my angular application. Here is the code for the popover.html
<label class="Label">
test
</label>
It doesn't acually create a popover on click & doesn't create an error message either.
The name of the directive is uib-popover-template:
<button ̶p̶o̶p̶o̶v̶e̶r̶-̶t̶e̶m̶p̶l̶a̶t̶e̶=̶"̶'̶p̶o̶p̶o̶v̶e̶r̶.̶h̶t̶m̶l̶'̶"̶
uib-popover-template="'popover.html'"
popover-placement="top"
popover-trigger="click"
type="button"
class="btn btn-default">
Mouse over me
</button>
For more information, see
Angular UI Bootstrap Directive API and Demo - Popover
For more information, see
I'm new to MEAN stack applications so I'm asking for help.
Everytime AngularJS tries to parse the following code
<button type="button" class="btn btn-link pull-right" ng-click="delete({{ post._id }});"><span class="glyphicon glyphicon-trash"></span></button>
Displays in the console the following error:
Error: [$parse:syntax] http://errors.angularjs.org/1.4.3/$parse/syntax?p0=%7B&p1=invalid%20key&p2=9&p3=delete(%7B%7B%20post._id%20%7D%7D)%3B&p4=%7B%20post._id%20%7D%7D)%3B
at Error (native) https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js:12330
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:6:416
at Object.q.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:209:32)
at Object.q.object (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:208:327)
at Object.q.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:205:335)
at Object.q.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:205:174)
at Object.q.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:204:434)
at Object.q.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:204:261)
at Object.q.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:204:96)
at Object.q.equality (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js:203:425) <button type="button" class="btn btn-link pull-right" ng-click="delete({{ post._id }});">
But when I inspect the delete button I can find this:
<button type="button" class="btn btn-link pull-right" ng-click="delete(55ba1c2d6411b92c1715490c);"><span class="glyphicon glyphicon-trash"></span></button>
Could some one help me to fix this problem?
Remove the{{ }} from the ng-click attribute, it is not required in this case:
ng-click="delete(post._id);"
Why?
https://docs.angularjs.org/api/ng/directive/ngClick
The ng-click directive accepts an expression which is evaluated on click.
In a large form, I'm using popovers to display error messages from the validation (I know, not best practice).
Now, I also want to add tooltips to display detailed explanation of the input.
However, using both, the tooltip and the popover directive (and their associated -trigger and -placement directives), the behavior is odd/buggy: Both, tooltip and popover are placed based on the popover-placement directive (ignoring the tooltip-placement) - and display the text provided for the popover.
<button class="btn btn-default"
popover="Popover" popover-trigger="mouseenter" popover-placement="right"
tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top" >
Label</button>
See this plunkr.
Any idea how to make this work?
They actually infact use the same placement function.
From the docs on popover:
The popover directive also supports various default configurations through the $tooltipProvider. See the tooltip section for more information.
Meaning if you had the following code:
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.options({
'placement': 'right'
});
}]);
It would change the default for both tooltips and popovers.
Best I can think of is it have some sort of wrapper around the element so you can do each in turn.
<button class="btn btn-default sampleBtn"
popover="Popover" popover-trigger="mouseenter" popover-placement="right">
<span tooltip="Tooltip" tooltip-trigger="mouseenter" tooltip-placement="top">
Tooltip + Popover
</span>
</button>
Demo in Plunker
A very Simple Way..Just Make a parent Span for the button and attach those properties with that Span. I have Some Code for that too
<span title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Some content in Popover on bottom">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</span>
Here is the JS Fiddle for that too
http://jsfiddle.net/h75k1fzj/
I've got a button linked to a UI Bootstrap
Collapse directive if I click on it
the script show a form to reply a comment.
when the form is showed I want to hide the button
but I've got a strange behavior
this doesn't work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-if="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
this work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-show="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
and I don't really know why !
Can you enlighten me, please ?
This is expected because ng-if creates new child scope and isCollapsed property is created in it on the first click. But ng-if itself is looking at the parent scope.
Try using toggle() function declared on controller level for ng-click
$scope.toggle = function () {
$scope.isCollapsed = !$scope.isCollapsed;
};
Consider using the rule:
Treat $scope as read only in templates.
I am testing angularJS and ui-bootstrap tooltips :
http://angular-ui.github.io/bootstrap/#/tooltip
What I want to achieve is a tooltip with some working buttons inside.
I have tried :
<input type="text" value="{{activity.name}}"
tooltip-html-unsafe='<button class="btn btn-primary btn-mini" ng-click="addChild(activity)">+</button>
<button class="btn btn-danger btn-mini" ng-click="remove(activity)">X</button>
<button class="btn btn-danger btn-mini" ng-click="removeChildren(activity)" ng-show="activity.children.length > 0">X children</button>'
tooltip-trigger="focus"
tooltip-placement="right" />
Which is ugly and does not work. The buttons are rendered but do not execute the 'ng-click'.
Is there some way I can tell the tooltip to fetch a partial and keep the ng-click functional ?
Tooltips that would contain "live" HTML (with AngularJS directives working etc.) are not supported in the current (0.5.) version of http://angular-ui.github.io/bootstrap/#/tooltip
You might want to open a feature request for this in https://github.com/angular-ui/bootstrap/issues?state=open