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)"
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);
Imagine these uses of a directive (in one HTML file):
<my-dir function="callMe()"/>
<my-dir function="someOtherFunction()"/>
Here's the important bit of the directive:
.directive('myDir', function () {
return {
scope: {
function: '&'
},
};
})
Here's the template HTML:
<div ng-click="function(5)">click here</div>
This does not work - While #function does indeed invoke #callMe and #someOtherFunction, there seems to be no way to pass the argument. How can I pass a method to the directive so that the directive can invoke the function and pass an argument?
It's pretty clear the HTML could simply refer to #callMe directly. But then the directive would not work for #someOtherFunction
EDIT - Here's a fiddle I was working on. I amended it with PSL's suggestions. It seems to work now!
Try this way:-
Specify the name of the argument in the directive arg:-
<my-dir callback="func1(arg)"></my-dir>
<my-dir callback="func2(arg)"></my-dir>
On your template provide the key value pair with the same key name as that of the function.
template:'<div ng-click="callback({arg:5})">click here</div>'
Demo
ng-onclick should be ng-click unless you are using some other angular component which provide an ng-onclick directive. Use closing tags for your directive elements.
Here's a plunk:
http://plnkr.co/edit/YQgijS?p=preview
The relevant bits:
I have no idea why this works, and I feel like it indicates there's something weird about & scope that I haven't learned yet.
When passing the variable in to the directive via an & scope, pass theFunction and not theFunction()
When calling the function in an ng-click, call fun()(args) instead of fun(args)
I know, weird, right? I'm sure there's something going on there. I asked a SO question about it a while ago, but got no response.
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 {{}}.
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?