As in the title, I'm trying to set a class on a div on page load ( not on a click ) with angular ng-class but I have no clue how to or if it is possible. The div is wrapped in a module and controller where I was previously trying to set the variable with $scope.frontpage but it didn't work.
<div id="main" role="main" class="clearfix" data-ng-module="ValidationBoxModule" ng-controller="ValidationBoxClassController">
<div validation-id="dataValidationSummary" validation-summary ng-class="frontpage" ></div>
<asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server"></asp:ContentPlaceHolder>
</div>
angular.module("ValidationBoxModule", []).controller("ValidationBoxClassController", ["$scope", function ($scope) {
$scope.frontpage = "";
($("#main").find(".sliderBox")) ? $scope.frontpage = "frontpage" : $scope.frontpage = "";
}]);
So is there a way to do it ?
What you're trying to do is not the angular way. As in: "don't do DOM manipulation in the controller". Instead use a directive, e.g:
function Ctrl($scope) {
$scope.frontpage = false;
}
angular.module('app', ['app.directives']);
angular.module('app.directives', []).directive('isFrontpage', function () {
return {
restrict: 'A',
link: function (scope, element) {
scope.frontpage = angular.element(element).find('#main .sliderBox').length > 0;
}
};
});
with:
<body ng-controller="Ctrl" is-frontpage>
<div id="main">
<div class="sliderBox"></div>
</div>
<div
validation-id="dataValidationSummary"
validation-summary
ng-class="{frontpage: frontpage}">
</div>
</body>
demo: http://jsbin.com/unihon/4/
Related
I want an angular diretive to add an inner wrapper to a DOM element. Unfortunately it's not wrapping but replacing the inner part of the element. (see plunker)
So I have this html snippet:
<body ng-app="plunker">
<div class="outer" wrapp-my-content>
<label>Name: </label>
<input type="text" ng-model="name" />
<p>Hello {{name}}</p>
</div>
</body>
The directive should change this into
<body ng-app="plunker">
<div class="outer" wrapp-my-content>
<div class="inner-wrapper">
<label>Name: </label>
<input type="text" ng-model="name" />
<p>Hello {{name}}</p>
</div>
</div>
</body>
But what I get is
<body ng-app="plunker">
<div class="outer" wrapp-my-content>
<div class="inner-wrapper">
</div>
</div>
</body>
Directive Code:
var app = angular.module('plunker', []);
app.directive('wrappMyContent', function() {
return {
restrict: 'A',
transclude: true,
replace: true,
link: function(scope, element) {
var innerWrapper = angular.element('<div class="inner-wrapper" ng-transclude></div>');
element.prepend(innerWrapper);
}
}
});
How can I fix that?
You've mixed up ng-transclude and custom transclude by link:
1. Use template of directive (demo):
var app = angular.module('plunker', []);
//Recommended angular-way
app.directive('wrappMyContent', function() {
return {
restrict: 'A',
transclude: true,
template:'<div class="inner-wrapper" ng-transclude></div>',
link: function(scope, element) {
}
}
});
2. Do transclude by custom link (demo) :
var app = angular.module('plunker', []);
//Equals transclude by your self
app.directive('wrappMyContent', function($compile) {
return {
restrict: 'A',
scope:true,
link: function(scope, element) {
var innerContent = element.html();
var innerWrapper = angular.element('<div class="inner-wrapper"></div>').append(innerContent);
//Do compile work here.
$compile(innerWrapper)(scope.$parent)
element.empty().append(innerWrapper);
}
}
});
Use a template for your '<div class="inner-wrapper" ng-transclude>' part instead of just making an element and prepending it... the ng-transclude directive won't be processed unless it's compiled which the template will be.
I have the following html structure:
<body ng-controller="checkoutController">
<div class="main clearfix" ng-controller="abroadCourseController">
//html useless information
<form name="checkout_form" ng-submit="submitForm()" novalidate>
<div validate-section="checkoutInfo" ng-show="stepOne">
//fields
<div class="confirmationBox">
<button type="button" ng-click="displayPaymentMethods()">SHOW PAYMENT METHODS</button>
</div>
</div>
<div validate-section="paymentAbroadCourseB2C" ng-show="stepTwo" >
//fields
<div class="confirmationBox">
<button type="button" ng-click="submitForm()">FINISH</button>
</div>
</div>
</form>
</div>
</body>
and the following js:
var myApp = angular.module('myApp',[]);
myApp.controller('checkoutController', function ($scope) {
$scope.submitForm = function(){
$scope.stepOne = true;
$scope.stepTwo = false;
alert($scope.checkout_form);
alert('oi');
};
});
myApp.controller('abroadCourseController', function ($scope) {
$scope.stepOne = true;
$scope.stepTwo = false;
$scope.displayPaymentMethods = function(){
$scope.stepOne = false;
$scope.stepTwo = true;
alert($scope.checkout_form);
alert('oi');
};
});
basically what I need is to have access on checkout_form through the parent controller, however, it's undefined. Is there a way to achieve that?
Here's a JSfiddle: http://jsfiddle.net/thm259o7/
The best way to deal with nested controllers in Angular is using the Controller As Syntax https://toddmotto.com/digging-into-angulars-controller-as-syntax/
Yes. Change your code like this:
myApp.controller('abroadCourseController', function ($scope) {
$scope.form.checkout_form = {}
And then change the HTML like this:
<form name="form.checkout_form" ...>
In my case, It works.
I have an anchor tag which when clicked should change it's text in the ng-click function. Can someone pleas help me out on this?
Below is the code:
<div ng-app="Test">
<div ng-controller="Foo">
<a class="anchClass" ng-click="hi($event)">click me</a>
</div>
angular.module('Test',[]).controller('Foo', function ($scope, $element) {
$scope.hi = function (e) {
var elem = angular.element(e.srcElement);
elem.val("Search");
}
})
Use $event.currentTarget to change current element's text
angular.module('Test', []).controller('Foo', function($scope, $element) {
$scope.hi = function(e) {
e.currentTarget.text = "Search";
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Test">
<div ng-controller="Foo">
<a class="anchClass" ng-click="hi($event)">click me</a>
</div>
in my app I defined a directive which implement a simple slider with a next/prev/goto methods.
The slider then is within an html snipet managed by another controller.
The problem is that the last slide contains a form, so if the submit is ok than I would like to go to the next slide.
In old javascript I would have passed a callback to the submit method in order to apply that callback.
I made the same thing. Is this the best / angular style way to do it?
Javascript (I omitted some detail):
.directive("sfCarousel", function() {
return {
scope: true,
restrict: 'A',
controller: function($scope) {
var slides = $scope.slides = [];
var currentIndex = $scope.currentIndex = -1;
$scope.next = function() {
//mynextfunction...
}
},
link: function(scope, element, attrs) {
console.log("sf-carousel");
}
}
})
.directive("sfCarouselItem", function() {
return {
scope: true,
require: '^sfCarousel',
link: function(scope, element, attrs, sfCarouselController) {
console.log("sf-carousel-item");
sfCarouselController.addSlide(scope);
}
}
})
.controller("mycontroller", ['$scope', function($scope) {
$scope.submit = function (callback) {
//if submit is ok then
callback.apply(null, []);
}
}])
HTML:
<div sf-carousel >
<div sf-carousel-item ng-class="{'active':active}" >
<div>my first slide</div>
<div sf-label="get-started.submit" ng-click="next()" ></div>
</div>
<div sf-carousel-item ng-class="{'active':active}" >
<form>
<!--here my form-->
<button type="submit" ng-click="submit(next)">submit and go</button>
</form>
</div>
<div sf-carousel-item ng-class="{'active':active}" >
<div>my last slide</div>
<!--other things-->
</div>
</div>
You can pass the function that you what to run on the parent controller.
// directive sfCarousel
return {
transclude: true,
template: '<div class="sf-carousel" ng-transclude></div>',
// ...
};
// directive sfCarouselItem
return {
transclude: true,
scope: {
func: '&',
// ...
},
template: '<div class="sf-carousel-item" ng-transclude></div>',
}
// controller html
<div sf-carousel >
<div sf-carousel-item ng-class="{'active':active}" >
<div>my first slide</div>
<div sf-label="get-started.submit" ng-click="next()" ></div>
</div>
<div sf-carousel-item func="next()" ng-class="{'active':active}" >
<form>
<!--here my form-->
<button type="submit" ng-click="func({})">submit and go</button>
</form>
</div>
<div sf-carousel-item ng-class="{'active':active}" >
<div>my last slide</div>
<!--other things-->
</div>
</div>
I am using AngularJS.
I have the following template:
<div>
... html content ....
</div>
I want to wrap the html content with an anchor only if the url model is not empty. For example, if $scope.url = 'www.cnn.com' then I want:
<div>
<a ng-href="url">
... html content ....
</a>
</div>
And if $scope.url = '' then I want:
<div>
... html content ....
</div>
Is there any way to do it in AngularJS?
Eventually I did it with a directive:
app.directive('skipElement', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var skip = attrs.skipElement ? !scope.$eval(attrs.skipElement) : false;
if (skip) {
var parent = element.parent();
var children = element.children();
children.detach();
parent.append(children);
}
}
};
}]);
Try ng-switch:
http://docs.angularjs.org/api/ng.directive:ngSwitch
<div ng-switch="url.length">
<div ng-switch-when="0"> .. content .. </div>
<div ng-switch-default> <a ng-href="url"> .. content .. </a> </ANY>
</div>