I am aware that in angular you can do something like this:
<div ng-class="{myClassName: myCondition}"></div>
and Angular will add 'myClassName' to the class attribute if the condition is true.
I am also aware that:
<div ng-class="myClassName"></div>
will evaluate my 'myClassName' scope value and add it to the element's class argument.
Is there a way to do both of these at the same time on an element? If so, how?
I don't know if I understand you right,
<div ng-class="{myClassName: true}" class="{{myOtherClassName}}"></div>
controller
$scope.myOtherClassName = "someClass";
The result should be:
<div class="someClass myClassName"></div>
Related
I am attempting to do something like this:
<div ng-form="testForm" ng-init="$ctrl.doStuffWithForm(testForm)>
Where I define a form/publish the form to the current scope with the name testForm and pass that form object to $ctrl.doStuffWithForm() in the ng-init. However, what appears to be happening is that, at the time of the ng-init, the form creation and/or the creation of testForm in the scope has not happened yet (other testing indicates to me that testForm does point to a form controller at a later point in the Angular lifecycle).
Is there any way for me to pass the form controller to a method in the ng-init like this? Or should I be doing it another way? Is there an attribute similar to ng-init, but that is used later in the lifecycle? What I am trying to do is basically an ng-repeat on an element with an ng-form, and pass each form to a controller method when each element is initialized.
Avoid using $ng-init directive. Simply assign the ng-form to a property of the $ctrl object:
<div ng-form="$ctrl.testForm">
{{$ctrl.testForm.$dirty}}
</div>
I was able to achieve my desired results by putting the ng-init in a child element of the ng-form element:
<div ng-form="testForm">
<div ng-init="$ctrl.doStuffWithForm(testForm)></div>
</div>
I have a directive that has a template something like:
<div class="some-class">
<div class="some-inner-class">
<div class="class-to-target">
</div>
</div>
</div>
in the directives link function I would like to assign 'class-to-target' to a variable and then use addClass() and removeClass(). Can anyone recommend a clean way to achieve this?
Any thoughts greatly appreciated
C
This should work just fine with the ng-class variable. You won't even need to use addClass() or removeClass(), you can simply manipulate the variables from within your linking function. Here is an example usage:
<div ng-class={classToTarget: applyClass}>
Then inside your linking function you simply set applyClass to true|false based on whether you want the class applied to the div or not. classToTarget should be set to the name of the class you want to apply to the div.
The ng-class documentation has some really good examples covering this exact scenario. See https://docs.angularjs.org/api/ng/directive/ngClass for more information.
I am creating a directive in which template I need to use the a scope's variable value as the name of the directive (or alternatively controller) to load.
Say I have a directive widget that has a template called widget.html which looks like:
<div class="widget widget.type" {{widget.type}} ng-controller="widget.type">
<div class="navBar">
<div ng-include="widget.type + '-t.html'"></div>
<i class="fa fa-close"></i>
<hr>
</div>
<div ng-include="widget.type + '-f.html'"></div>
</div>
Now widget.type is not getting evaluated in the first line. It works fine for ng-include. Say widget.type's value is weather. The first line should then be interpolated first to look like (doesn't matter if class attribute, widget.type-attr or ng-controller is interpolated)
<div class="widget" weather>
and then compiled to include the weather directive.
How can I get widget.type interpolated in the template?
Not an option is to use ng-include to load the directive. I need to use one common template for the widget and want to add/override/extend the base directive with additonal functionality/Variables.
If this is not the way to achieve that, is there a way to extend a directive the OOP-way?
See the plunkr
You can only place interpolation expressions in text nodes and attribute values. AngularJS evaluates your template by first turning it into DOM and then invoking directive compilation, etc. If you try to place {{...}} instead of attribute name, you'll just end up with messed-up DOM.
If you really need to replace a whole directive based on $scope variable value, you'll need to create a directive for application of other directives and do some heavy lifting with $compile (you'll have to completely re-compile the template each time the value changes). I'd recommend trying to find other designs solving your situation before attempting this.
For adjusting your template based on element attributes, see this answer.
I have an element:
I'd like to use
ng-class="{ 'children'+level.length }" (or something like this, i.e to output a class that has the number of levels. Is it possible to do it on this iterating element?
Yes, something like:
<div ng-repeat="level in levels">
<p ng-class="{'children' : level.length == 1}">test</p>
</div>
ng-class simply takes an expression.
I think the easiest way is to use a function in your ng-class.
$scope.levelClass = function(i){
return "level"+i;
}
and then
ng-class="levelClass(children.level)"
Check out this question for other solutions
Generating variable for ng-class dynamically using Expression in AngularJs
I'm trying to change some html elements' class attribute by AngularJs' $scope value. But it seems I can't.
<div class="{{object.someAtrribute}} > Content </div>
So, how can i do this actually?
Thanks.
You want to use the ng-class directive. It takes an object with a set of class names and boolean expressions:
<div ng-class="{'class-name': boolean}"></div>
So, in your example, you can do something like this:
<div ng-class="{'larger-than-content': item.foo > content}"></div>
Since this is an object, you can add several classes:
<div ng-class="{'one': foo == 1, 'two': foo == 2, 'three': foo == 3}"></div>
Note: The quotes on the class names are not necessary, although I often have dashes in my class-names. In that case, the quotes are necessary (you are describing a JS object), so I tend to use them always for consistency.