I have searched the question/answers and it seems as if I should use a directive. I would however prefer to use the well tested ngInclude. The scenario is:
I am using ngInclude to fetch an external navigation bar(from a different site) and the returned html contains a login form, that points to a wrong url.
My ngInclude looks like this: <div ng-include = "''+API_HOST+'api/cms/navbar'">
The login form part of the navbar looks something like this
<form id="loginForm" class="form-inline ng-pristine ng-valid"
method="post"
action="/somewebapp/j_spring_security_check"
name="loginForm" target="_top"
I would like to modify the action attribute, to point to a different url.
Is there no other way than creating a directive to do that ?
Thanks
why you not use :
$scope.loaded = function(this_)
{
angular.element(document.getElementById("loginform")).children().attr("action", "yahoo.com");
}
see this plunker http://plnkr.co/edit/O4NyTULkBB6BpN4T9MNS?p=catalogue
Related
I am in the process of optimizing the performance of Angular app. I am using ng-include to add partial views and its controllers. Following is the code snippet
<!--show term rule view-->
<div id="showTermRule" ng-controller="TermRuleController as term" ng-if="showTermRule">
<div data-ng-include src="'/Relevancy/termRule/termRule.html'" ng-if="!isPublsihed"></div>
<div data-ng-include src="'/Relevancy/termRule/publishedTermRule.html'" ng-if="isPublsihed"></div>
</div>
<!--show function rule view-->
<div id="showFunctionRule" ng-controller="expressionBuilderController" ng-if="showFunctionRule">
<div data-ng-include src="'/Relevancy/functionRule/functionRule.html'" ng-if="!isPublsihed"></div>
<div data-ng-include src="'/Relevancy/functionRule/publishedFunctionRule.html'" ng-if="isPublsihed"></div>
</div>
<div id="showQueryRule" ng-controller="queryBuilderController" ng-if="showQueryRule">
<div data-ng-include src="'/Relevancy/queryRule/queryRule.html'" ng-if="!isPublsihed"></div>
<div data-ng-include src="'/Relevancy/queryRule/publishedQueryRule.html'" ng-if="isPublsihed"></div>
</div>
I have a parent controller from where I am making "showTermRule" variable true and broadcasting an event as follows
switch (rule) {
case "Term Rules":
$scope.currentRuleDisplayed = 'Significant Terms';
$scope.showTermRule = true;
$rootScope.$broadcast('updateTermRule',$scope.profileTree[$scope.currentProfile].termRules,$scope.currentProfile,$scope.profileTree[$scope.currentProfile].id);
break;
The problem I am facing is when I use ng-if in child controller, say TermRuleController, it is not able to catch the broadcasted event from parent controller. As per my understanding it is because by the time I am broadcasting event div element which is adding controller is not getting added to DOM.
I have tried same thing using ng-show. It is working then but then it is taking very long to load the page. Can someone suggest the right way to add partial views and controller. After some research I have found that instead of using ng-include I can use directive. I am yet not sure about it.
Also I guess writing service instead of broadcasting might solve the problem but my question is, is it the correct way to add partial views having different controllers?
You need to keep in mind when using ngInclude to split your templates into partials. Instead of applying a controller to an element in a layout-template, apply the controller to an element in the partial. That way you’ll not need to target its parent’s scopes, coupling controllers together by scope. Here’s an example: Layout.html
<div ng-controller="LoginCtrl">
<div ng-include="login.html"></div>
</div>
Login.html :
<form-field ng-field-data="{{login.usr_name}}"></form-field>
<form-field ng-field-data="{{login.password}}"></form-field>
In the case above, you would want to handle the login model in the
LoginCtrl controller, but the scope of the login partial login.html
will be one step deeper. Instead, define the controller on the same
level as the partial (see below).
Layout.html: <div ng-include="login.html"></div>
Login.html:
<div ng-controller="LoginCtrl">
<form-field ng-field-data="{{login.usr_name}}"></form-field>
<form-field ng-field-data="{{login.password}}"></form-field>
</div>
So, in this way $scope of parent and child controller would be same.
So, in your case you don't have to broadcast an event , it would be directly available in the child controller.
Hope, this articles helps you out from the problem that you are dealing.
I've got this template:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" ng-repeat="product in ad.products">
<a href="{{product.link}}">
<h1>{{product.title}}</h1>
<img src="{{product.src}}">
<p>{{product.description}}</p>
<h5>{{product.price}}</h5>
</a>
</div>
</div>
</div>
From my controller I need to evaluate this template so that it checks how many products that have been selected and then it interpolates each product's values into the template. After that is done I also need to remove the ng-repeat so it doesn't fire an error in the external pages that will use this where angular is not present. However I'd figure that I'd just use a regex to look up the ng-repeat and everything in the expression and then remove it.
I've been looking at $interpolate and $compile but I can't figure out how to work with them from my controller so that it does what I want. This is because when I use these on my template and then console log the template value it's a function with a whole lot of nonsense in it.
So doing this:
ad.html = $compile(res.data, $scope);
Generates something like this:
function(b,c,d){rb(b,"scope");e&&e.needsNewScope&&(b=b.$parent.$new());d=d||{};var h=d.parentBoundTranscludeFn,k=d.transcludeControllers;d=d.futureParentElement;h&&h.$$boundTransclude&&(h=h.$$boundTr…
Can someone shed some light on how to achieve what I want?
Your are using $compile function in wrong way, you should call $compile(html) function by passing $scope parameter like below.
var compiledDOM = $compile(res.data)($scope);//then do append this DOM to wherever you want
ad.html = compiledDOM.html(); //but this HTML would not make angular binding working.
I would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:
<div myIframeDirective></div>
What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.
You should be using ng-if.
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
Here's a working example:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
</div>
In Angular, ng-if will remove the iframe from the DOM if it is false.
This means the URL will NOT be requested until ng-if is true.
<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>
And use the link
Toggle
Then in your controller, you can control what your iframe display:
$scope.src = 'https://angularjs.org';
Im working with AngularJS and something really weird happens.
In the same HTML file I have the following two lines of code:
<img id ="image_displayed" src='{{rootContext}}/images/{{team.imgUrl}}' />
and
<form action='{{rootContext}}/images/{{team.imgUrl}}' method="POST">
I have defined rootContext in $rootScope as a global variable, $rootScope.rootContext = 'whatever'. The point is that in the image tag is binded correctly, but when it is inside the form tag, AngularJS makes no magic and then the value of the action attribute remains as "{{rootContext}}/images/{{team.imgUrl}}".
Updated:
The solution to this problem is to write it as follows:
<form id="joinTeamForm" action="{{ rootContext + '/images/' + team.imgUrl}}" method="POST">
My index.html looks like this:
<div ng-include src="'common/header.html'"></div></div>
<div id="view" ng-view></div>
However, I don't want the header.html to show up when the user is not logged in. AuthenticationService.isLoggedIn() is available to use. How do I make this work?
Do I need to broadcast the login event from the LoginController so that HeaderIncludeController can update itself or something? Seems really messy...
html
<div ng-include src="'common/header.html'" ng-if="loggedIn()"></div>
controller
$scope.loggedIn = AuthenticationService.isLoggedIn;