Why isn´t it possible to use functions like
{{tag.name}} ?
If I use the model as an hyperlink it works.
$scope.addTag = function (tag) {
tagListe.push(tag);
console.log(tagListe.toString());
}
That is the code inside my controller.js.
I think it should be this way:
{{tag.name}}
anything inside ng-click is angular.js expression, you do not need to wrap it with {{}}.
Related
For a mockup I need a simple mechanism like
ng-click="alert('Clicked')"
but the code above is not working, can someone help me? I don't want to touch the Controller..
Refer to previous answer, ng-click = "alert('Hello World!')" will work only if $scope points to window.alert i.e
$scope.alert = window.alert;
But even it creates eval problem so correct syntax must be:
HTML
<div ng-click = "alert('Hello World!')">Click me</div>
Controller
$scope.alert = function(arg){
alert(arg);
}
As far as I know, ng-click works only within your $scope. So you would only be able to call functions, defined in your $scope itself. To use alert, you may try accessing the window element, just by using window.alert('Clicked').
EIDT: Thanks to Ibrahim. I forgot. You shouldn't be able to use window.alert, as far as you won't define:
$scope.alert = window.alert;
In this case, using alert('Clicked') in your ng-clicked directive should work. But at the end, this method would not solve your problem of not touching your controller.
You can use
onclick="alert('Clicked')"
for debugging purposes
As Neeraj mentioned, the accepted answer does not work. Add something like this to your controller to avoid an Illegal Invocation error:
$scope.alert = alert.bind(window);
I want to use something like below:
<span ng-bind="rep.newDate.match('.*FNFx.*')?'NotAvailable':(rep.value===''?'?':rep.value)"></span>
But it's not working. How to correct it?
I problem I feel is you cannot use JavaScript's match function as it is in the template. This is because it is not in angular's scope.
To resolve this, create a function in your controller for doing the regex part as follows:
$scope.matchPattern = function(date) {
return date.match('.*FNFx.*')
}
and change your ng-bind to:
ng-bind="matchPattern(rep.newDate)?'NotAvailable':(rep.value===''?'?':rep.value)"
As in the documentation it is like some div or html tags wrapping out the expression.
http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBind
Is there a way to just get the expression value without the or whatsoever wrapper it?
Is there a reason you can't just use the curly brace notation {{expression}}?
ngBind is a directive, and all directives must be attached to a tag. So no, there's no way to use ngBind itself without putting it on some kind of tag.
As mentioned, you can use string interpolation in the form of {{expression}} instead.
ngBindTemplate exists because some HTML elements don't allow child elements, so {{expression}} may not work correctly. In those cases, you put ngBindTemplate on the element; it doesn't make sense to use it without a "wrapper" element.
Note: This is in the context of ng-bind-html, but still relevant and hopefully useful to someone.
I was hitting this with a wrapper div breaking my CSS.
After lots of trial and error, came up with the solution of using a custom directive to replace the element with the desired html.
;(function (angular) {
'use strict'
angular.module('app').directive('asReplaceElementWithHtml', replaceElementWithHtml)
function replaceElementWithHtml() {
return {
link: replaceElementWithHtmlLink,
}
}
function replaceElementWithHtmlLink(scope, element, attrs) {
element.replaceWith(attrs.ngDataHtml)
}
})(angular)
Use it like this:
<div
as-replace-element-with-html
ng-data-html=`{{:: stringOfHtmlFromTrustedSource}}`
></div>
Angular.js provides a banch of global functions like angular.lowercase, angular.isArray etc.
Suppose I have a string in my scope:
function MyController($scope) {
$scope.myString = "TEST"
}
Calling angular.lowercase has no effect:
{{lowercase(myString)}}
{{angular.lowercase(myString)}}
How can I call such function in my template?
UPDATE
Example with angular.isArray
<div ng-show="isArray(myVar)">...</div>
The expression in the {{}} is not actual javascript although it looks that way - it's an angularjs expression. For this reason not everything will be available to you.
charlietfl is right that your particular case can be solved with an existing filter. Not every angular.* function is exposed this way, however, in which case you should create your own custom filters.
Filters are cleanest but as a dirty workaround you could also just have the following line in your controller:
$scope.lowercase = angular.lowercase; // not angular.lowercase()
Using the Angular UI Select2 directive, with tags defined on an input field. If the input is itself inside a custom directive, then it is not initialised correctly and the console gives an error:
query function not defined for Select2 tagging
I suspect this might be to do with the order in which the directives are compiled / linked vs when the select 2 function is called.
Maybe there is a simple workaround, perhaps using the compile function or a directive controller instead of a link function? Or maybe it is an issue with the Angular UI select2 directive.
I have made a plunker that displays the problem:
http://plnkr.co/edit/myE5wZ
So my question is - How do you get get select2 tags working from inside a custom Angular directive?
In the end I managed to find a solution I was happy with involving nesting two directives, that way the logic can be encapsulated inside the parent directive (not spilling out into the controller).
A Plunker of my solution is here for anyone who may stumble across the same issue:
http://plnkr.co/edit/ZxAPF5BzkgPtn9xddCRM
I just encountered this today and summarily realized the fix:
PostLinking functions are executed in reverse order (deepest grandchild to greatest grandparent).
Put your custom modal's code (or anything that sets $scope data for use in its children) inside a PreLinking function. PreLinking functions go from parent to child, and all PreLinking functions are performed before the PostLinking functions.
I had a similar issue. Your solution works but IMHO I think an even better solution is to use the controller function instead of the link function inside the directive. Doing this you do need nested directives.
By using the controller function instead of the link function in the directive it's working. Example:
function myFunction() {
var dir = {};
dir.scope = { myModel: '=' };
dir.restrict = 'E';
dir.templateUrl = 'myTemplate.html';
dir.replace = true;
dir.controller = function ($scope) {
$scope.myVar = ...;
};
return dir;
};
I have this error too. My short solution:
<input type="hidden"
name="citizenship"
class="form-control input-sm col-sm-10"
style="width:500px"
multiple
ui-select2="params.options.citizenshipOptions"
ng-model="cvLang.content.citizenship"
ng-repeat="a in [1]"
/>
ng-repeat="a in [1]" is a magical thing!!! It is not clear for me a logic of a context, but this is working. May be this can help?