I found this example of dropdown-multi-select.
I try to make code work in plunker:
**http://plnkr.co/edit/lKK6lAhczWNTgDRhPBsN?p=info**
but it not working.
Any idea what I am missing?Why I don't dropdown element on index.html page?
You made a lots mistake over there, Actually the mistakes are more than what I mentioned below.
ng-app="sensorManagement" has been missed
You were added Angular2 reference instead of angular 1.x
angular.module('sensorManagement',[]) has not been created
ng-controller with controllerAs is missing on the page.
Bootstrap styling is missed to add on the page
Script reference to controller.js & directive.js were missing
Working Plunkr
Related
I am trying to show the content using pagination so I have used "angularUtils.directives.dirPagination" directive in module as angularJS doesn't support pagination inherently. Along with that I want to use angular strap so I can improve UX. To do so I have to put "mgcrea.ngStrap" directive. But when I use these both directives I don't get anything working out.
This is what I am doing.
var xyz = angular.module('test',
['angularUtils.directives.dirPagination','mgcrea.ngStrap']);
xyz.controller('LoadConnectors', function ($scope) {
....
});
Can any one help me out? I am really stuck. Thanks in advance.
There is one solution for this problem
First make sure your js refrences are correct
Then make sure you include refrences for 'angularUtils.directives.dirPagination','mgcrea.ngStrap' before js file which contains refrence for angular.module
I'm using inline templates for a $modal in ui.bootstrap for AngularJS. The template has data bindings. The "ng-bind" form of binding works while the interpolation "{{ }}" does not. Also, data for "ng-repeat" is unavailable (which is the main problem)
I tried using non-inline template with templateUrl (involving a GET request) and interpolation seems to work then. The problem is that this template is quite Ruby-heavy with "form_tag"s and View helpers etc, hence I do not wish to extract it out into an external template.
Here's a Plunker demonstrating the problem http://goo.gl/heOD2m
Can anybody help me get the "ng-repeat" working, please? And possibly explain why this is happening.
Versions:
AgnularJS - v1.3.8
ui.bootstrap - v0.12.0
Thanks
Got the answer on Github: https://github.com/angular-ui/bootstrap/issues/3215#issue
In short, The modal HTML needs to be an "ng-template".
Here's the fixed plunker:
http://goo.gl/po843F
I'm in the middle of the transition from version 1.2.* to 1.3.* , and I came across a very strange and critical bug.
In my application I have a very simple directive contain a template with ng-class (with condition to scope property) for some reason it's not working with 1.3.* version, and it's work fine with 1.2.* version.
Have a look on this Plunker to illustrates the problem.
This Plunker code is with angular 1.2.* version, and as you can see it's work fine.
Try to change the angular version (index.html)
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-animate.js"></script>
<!--<script src="https://code.angularjs.org/1.2.28/angular.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-animate.js"></script>-->
Refresh the page, and then you can see the bug:
Angular doesn't refresh the ng-class according to the 'active' property changing.
I tried to understand what can causes to this bug, and after a lot of tries I found that 'ngAnimate' module causes to this problem. try to delete the 'ngAnimate' dependency (script.js):
//var app = angular.module('app', ['ngAnimate']);
var app = angular.module('app', []);
And then you can see that everything is fine, so 'ngAnimate' version 1.3.* causes to this problem.
So it's AngularJS bug, am I right?
If not, what I'm doing wrong?
Do you have any specific reason to use the replace option in the directive? If not, you can just remove it and it works fine. Link to working plunker with Angular 1.3.9:
http://plnkr.co/edit/jLIS9uJ1PHC64q6nEmtB?p=preview
V1.3.9 docs tell that replace is deprecated and very rarely needed for directives to work, and apparently in your case it also managed to cause some trouble.
As per the doc replace will be deprecated in version 2. As you are using Angular 1.3.9, that should be fine.
To fix this issue either you can remove replace from directive or still if you want to use replace then wrap directive template content which has ng-transclude in a div like below
<div><div ng-click='click()' ng-class='{\"{{defaultColorClass}}\" : !active, \"{{activeColorClass}}\": active, \"mousePointer\" : !active}' class='k-content-button-inner-style {{effectClass}} {{externalClass}}' ng-transclude></div></div>
For more info refer - https://docs.angularjs.org/api/ng/directive/ngTransclude , Explain replace=true in Angular Directives (Deprecated).
#bensiu: Removing the unused* variable {{effectClass}} in the template will make it work for 1.4.4 in the plunker example linked to the question.
Modified plunk here
*Edit: Probably I should say "using a variable not in scope" rather than "unused variable".
i am making a test with protractor for my angularjs app
and i came accross the following problem
what i want to do is :
browser.executeScript('$scope.$apply')
i want to do this so that my screen updates/renders so i can get the values on screen
only when i do this it says : $scope is not defined
if have also tried multiple javascript render ways who also failed ,but i am not sure if i have used the right methods for that...
does anybody has the same problem or know how to fix this?
Perhaps you should be using an ng-view directive in your container markup to render html snippets or partials within your index page. Take a look at what ng-view can do (http://docs.angularjs.org/api/ngRoute.directive:ngView) :-)
I am trying to experiment with examples and tutorials at http://docs.angularjs.org/guide/expression and the examples are not working in plunker and jsfiddle. I am getting this error in the console
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=App&p1=Error%3A%…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A27%3A198)
Is this a known error?
JSFiddle in particular has always been difficult to get working with AngularJS. The HTML section isn't meant to take an entire HTML document. Instead, you need to configure the workspace to work with Angular following these steps:
Under external resources, add the Angular script (remember to click the + icon)
Under Fiddle Options change the body tag to include ng-app like so: <body ng-app>
That should get you started. If you don't mind using an older version of Angular (1.1.1), you can select it from the "Frameworks & Extensions" drop down and change the 2nd drop down from onLoad to No wrap - in <body>.
See here for a working example from the docs: http://jsfiddle.net/jPtb3/
And here for the optional approach using 1.1.1: http://jsfiddle.net/5nA2H/
Update
There's some misinformation in the comments.. The docs ARE actually creating angular.module for you, but they're passing in an empty dependency. So you can either remove ="App" (not best), or you fix the angular.module declaration by removing the empty dependency (best) like so:
angular.module('App', []);