Using Directive/Isolated scope as HTML inside a angular-bootstrap popover - javascript

Using angular-ui popover you can put an html inside a popover. If for example I have a directive named sampleDirective (assuming this directive exists) how can I put it inside the popover? I tried using $sce.trustAsHtml but it doesn't work. I also tried $compile but failed miserably.
$sce.trustAsHtml('<sample-directive></sample-directive>');
Is there a way to use to put an element directive inside a popover?

As said by Alon Eitan, instead of using ui-popover-html, I used ui-popover-template instead and directed the templateUrl of the directive to it.. In this case, there is no need of an isolated scope anymore..

Related

Hide element HTML when load AngularJS

I am a beginner in angularJS, and do not write good English.
I have the following code
<span class="custom-marker-price" ng-bind="property.rentValue"></span>
How can I hide the element span (IMG1) when load angular...
Well, if im correct you should use ng-hide property.
Inside of span after class add ng-hide='hideIt'
and inside of controller at first line put:
$scope.hideIt=false;
And when you want to hide it just put boolean variable in true:
$scope.hideIt = true;
You could also use ngif property.
Hope this help!
ngCloak
directive in module ng
The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
— AngularJS ng-cloak Directive API Reference

In AngularJS, after using jqLite .html() method the angular directives do not work?

I'm using the jqLite's .html() method to replace some content on my HTML page. I used
angular.element(document).find('myElement').html(myContentFromServer');
to replace some content. But, myContentFromServer has some directives, like ng-model in it. But, it doesn't seem to cause any effect.
Do I need to $compile or something..?
Please help out.

AngularJS : ng-if and ng-repeat not working after custom transclusion

I am attempting to do custom transclusion of a directive in angularJS as I need to transclude two separate elements into two separate locations.
The issue is that whilst some directives carried over on the transcluded content work such as ng-bind others such as ng-if or ng-repeat do not, even after recompiling the transcluded elements with the correct scope.
Example: http://jsbin.com/menakapoma/1/edit?html,js,output
As you can see in the example the ng-bind works but the ng-if does not even though they are both on the same scope and accessing the same value. Neither the true or false state of the ng-if works.
I believe this is because the ng-if directive gets transcluded as a comment, however even if I set the priority of the transcluding directive to 9999 and perform it in the pre-linkage function it still does not work.
Does anyone know how to get these directives working?
The issue is that no matter what by the time the transclude function executes the nested directives have already been compiled and replaced with comments.
I have managed to achieve this by completely foregoing the transclude options, and manually requesting the template via $templateRequest.
I specify a compile function which replaces the element with a comment placeholder to ensure nothing is rendered during the request.
In the linkage function I manually compile the template and then replace directive's element with it.
See the updated example here: http://jsbin.com/rocedarono/3/edit?html,js,console,output
It certainly doesn't feel like the cleanest/optimal solution and I am open to any other solutions that can do it a little nicer. Especially as any DOM events have to be bound to after the $templateRequest promise is resolved and checked for existence before removal on the $destroy event to ensure it resolved beforehand.

Add ng-click to highcharts-ng column chart xAxis labels

I am using highcharts-ng within an angular app, I need to run a function when the xAxis labels are clicked see below the categories and labels I am adding to the chart.
Currently I can add an onclick to the label and alert but am not able to get this to work with angular.
return "<a onclick='alert(1)'>" + this.value + "</a>";
http://pablojim.github.io/highcharts-ng/
Working example of current code here.
http://jsfiddle.net/3gLr4vcu/
Angular directives are not processed until $compile is called, which is usually done when Angular inserts templates, for directives and ng-include for instance. If you modify the DOM yourself, Angular doesn't know quite what do with the HTML unless you call $compile yourself. After the DOM is modified by highcharts-ng, you will need to call $compile like this:
$compile(element)(scope)
Ideally you want element to be an element that hasn't been $compiled already (I am unsure what happens if that is not the case) and scope to be first scope encountered in an upwards traversal of the DOM tree. If the scope hierarchy is not needed, then you can just attach the element to the $rootScope.
You will need to inject $compile (as well as $rootScope if you use it as described). For more information, see the $compile documentation, which also explains the odd syntax off the $compile expression. If you post your full code, I can tell you where to put the $compile statement and how to find the appropriate scope to use.
EDIT: Here is a working JSFiddle: http://jsfiddle.net/tsclaus/bpg4556c/

How can I get AngularJS binds working with a fancybox dialog?

I'm learning AngularJS and I'm having some difficulties with dialogs.
Since i'm converting my app from a classical Jquery-based to an angular one, i want to use Fancybox to open dialogs with custom dynamic HTML inside, with the fancybox open method.
$.fancybox.open(html);
I wrote a service to use fancybox: now i open my dialogs but the content inside the dialog is not "compiled" against angular, so any angular directive set on that HTML doesn't work.
See the example
http://plnkr.co/edit/UwryF1ocleyND7zxCGJz?p=preview
I imagine that the problem is in the service, but i don't know how to fix it. Could you show me how i can get an html sensible to angular directive inside the HTML shown in the dialog?
UPDATE:
i've tried to use $compile, and set a directive instead of a service (calling the method inside the directive directly from ng-click)
http://plnkr.co/edit/Y18bRSMdV62VObMGJ2Ie?p=preview
what's wrong now? why my $compile doesn't work as expected?
The problem is that angular looks for function expressions only on the scope and NOT on window as plain-javascript does. Hence, when you add an alert function on the $scope, it will be wired correctly: http://plnkr.co/edit/y02UMQ2kU4fh8Imsa82u?p=preview
$scope.alert = function (phone) { window.alert(phone.name); };

Categories

Resources