I'm using angular-wizard in a project with UI-router, you can see a demo if you click the "Create" button on the right:
http://plnkr.co/edit/XYUamusHru7eV0nvAD5i?p=preview
The wizard works fine separately from the current project, problems happen when I try to integrate it into my app I get this error in the console:
Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div class="steps" ng-transclude="">
I think this has to do with the templating logic in UI-Router, or it could be the way the directive is written creates "orphans". Anyone have any ideas on what the problem is?
looks like your NewCampaign.html is using some copy+pasted dom since it has angular comments in there <!-- ngIF ... -->
once cleaning up the template, you can see that the wizard directive isn't being used in that template. The wz-step directive needs to be in the context of a wizard directive since the transclude happens inside the wz-step.
Also, removed the extra ng-app and ng-controller from the template. The controller should be defined along with the state. Check out the fixed plunkr here: http://plnkr.co/edit/c3fcV5RSUMXGIFpk8AbV?p=preview
Related
I'm building a third party widget that will be loaded onto multiple sites. I'm using angular for implementation, with a build script that wraps my angular so it doesn't interfere with any other angular that might be used on the page.
Everything works fine when I use my own custom directives, but when I tried to incorporate a loading indicator, using ng-show, it "sometimes" didn't work. I tracked the "sometimes" down to "on pages that already use angular".
It seems that the page's angular is still data binding my templates when they are inserted into the page. Is there any way I can make my dom a no-go zone for the page's angular?
ng-non-bindable seemed like it might work, but if I use that, I can't bootstrap underneath it.
What you need to do is to bootstrap angular programatically instead of using a tag.
<html>
<body>
// other parts of your site
<div></div>
// your angular stuff
<div id='app' ng-controller="MyController">
Hello {{greetMe}}!
</div>
</body>
</html>
// your controller
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.greetMe = 'World';
}]);
// bootstrap angular programatically/manually
angular.element('#id').ready(function() {
angular.bootstrap(angular.element('#id'), ['myApp']);
});
Without forgetting to use ng-non-bindable too on parts that u don't want to bind ofcoz
So, here is what I have done, which is an abomination. I would much prefer a clean answer, but this protects my dom from the other angular instance.
First, I wrap my entire dom element with ng-non-bindable. This keeps the page-level angular from interfering with it.
Then, I add the following, adapted from AngularJS - how to override directive ngClick
var root = angular.module('rootModule', []);
root.config(function($provide){
$provide.decorator('ngNonBindableDirective',
['$delegate', function($delegate){
$delegate.shift();
return $delegate;
}]);
});
This removes the implementation of ng-non-bindable inside my angular instance. So the page angular will ignore the dom, but my angular won't ignore it. I just hope I don't have to implement ng-non-bindable-really later down the line.
Someone please save me from this horror by giving me a clean answer!
I'm working with AngularJS.
One of the (technical) requirements is to fetch the "ng enabled" HTML content from the server, in response to a click event, and inject it into a <div ng-app> via JavaScript.
The problem is that the newly injected HTML is not wired, as Angular goes through the compile and link phases only when the page is loaded the first time.
Is there a way to trigger them manually?
Am I approaching this problem in the wrong way? Is there a more idiomatic way to accomplish what I described?
Thanks
There are multiple ways to inject dynamic content into the view in AngularJS. One of the way to inject dynamic content is to use ng-include directive. It can take an endpoint from where to get view.
You can combine it with ng-if to achieve load view on click. For example:
<span ng-if="clicked">
<div ng-include='pathToTheHtml'></div>
</span>
The clicked variable would be false first, on clicking on the button set it to true, this would trigger ng-include to get the content and inject it into html.
If you want finer control then you need to use the $compile service. The html that needs to be injected into the DOM needs to be compiled and linked to the scope using $compile service. This can be done in a directive.
element.append($compile(htmlFragment)(scope))
angular.bootstrap(element, [modules], [config]);
I tried this in my Angular app, but it does not work. So I tried inserting a custom tag(<mytag>) into the head and made the directive work with this by replacing "head" with "mytag".
This however is not really what I intended, because it adds <mytag> to the body instead of the <head>
Does anyone know how to make it work with the head-tag?
I had the same challenge. Make sure that your angular app is initialized on the html tag. Then this solution works out of the box.
However for us this was not an ideal solution. So I modified Zack Boman (tennisgent) https://github.com/tennisgent/angular-route-styles code, so that it could be used anywhere after app initialization.
Renamed the directive to: zbRouteStyles
Modified the restrict to include attributes: restrict: 'EA'
Changed the line: elem.append($compile(html)(scope));
to
angular.element('head').append($compile(html)(scope));
With these changes I was able to add the directive to any tag after my angular app was initialized even the tag that my app is initialized on.
e.g.:
<div ng-app="myApp" zb-Route-Styles>
<div>
I'm new in angular and my english is not very good, so i try to explain my problem the best i can.
I'm using the ui.bootstrap.modal in my project, and i need that the modal window i open can be controlled by another controller and not only ModalInstanceCtrl.
I want to ModalInstanceCtrl manage the common actions in a modal window, (set title, close, etc..) and then another controller (SpecificController) manage specific actions.
So this is my modal template view now:
<h1>
{{title}}
<a ng-click="closemodal()">x</a>
</h1>
<div ng-include src="specificTemplate.html" ng-controller="SpecificController"></div>
My idea is that specificTemplate.html and SpecificController can be set as a variables in the future and so having a system for manage modal windows with common actions, and other specific actions for each modal window. The include template works fine, but with the ng-controller label i get the following error:
Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance
I have SpeficController defined in my controllers section.
In other similar questions in StackOverflow, the problem were that ng-controller="ModalInstanceCtrl" was set in the template, but i want/need another controller for specific actions as a child one.
How can fix this?
There are several ways you can manage this, but first of all - don't inject $modalInstance into SpecificController. If you need to close (or dismiss) a modal from within a scope created by the SpecificController you can do so by using the $close() and $dismiss() method available on the scope.
Having said the above your example is a bit too abstract to provide exact guidance so if you could provide a representative use-case using http://plnkr.co/ you would get more detailed answer.
With angular 1.2, I'm trying to animate a ngView whose associated templates have custom directives inside (markdown directives).
My animation is the simple CSS3 example given in the tutorial.
I noticed some flickering when changing routes that seems to be due to the ng-enter class being added 'to late', that is after the directives are processed. In other words, during the processing of the markdown, the output view is displayed without the ng-enter class and is visible.
Is there a way to change this behavior ?
Note : ngCloak and $routeProvider resolve property are used to prevent other form of flicker.