Moved this question to this post - Angular events, ng-click, do not work with other libraries Dojo, Knockout, KendoUI, ESRI JSAPI
No matter what I try, ng-click does not work. However, onclick works. Inside the scope, wiring up an on click event dos not work. What is going on?
EDIT: I can call the $scope.myClick() from the command line. But it will not hit the breakpoint. It will show an alert window, but if this is called from within HTML directive, the function is not hit.
EDIT 2: heres a plunker - https://plnkr.co/edit/kK3NmWB9wfOopG7m5MYv?p=preview
EDIT 3: Ok, so the plunker works, but the horrible application I need to add angular to must messing with something in angular. Any ideas what could be breaking Angular in an existing app? This other app uses dojo, dojo loaders, and require.js. Everything works, except for the ng-click event.
EDIT 4: I commented out an Init() call from this application which loads Dojo, Kendo UI, Knockout, and ESRI JSAPI components, and this Angular code with ng-click works. My gut feeling is knockout is messing with this. Is it possible to completely isolate Angular from the rest of this application? Any suggestions?
here is the app:
var myApp = angular.module('myApp ', []);
directive:
myApp.directive('rapidReport',
function () {
return {
restrict: 'E'
}
});
<div class="ls-rapidReports">
<div ng-app="myApp">
<div id="rapidreportCtrl" ng-controller="rrController">
<button type="button" ng-click="myClick()">hehe</button>
</div>
</div>
</div>
controller:
myApp.controller('rrController',
function rrController($scope) {
$scope.myClick = function () {
debugger;
};
});
Here is the problem:
var myApp = angular.module('myApp ', []);
which should be:
var myApp = angular.module('myApp', []); //myApp without space before '
-
EDIT: Now I see it fixed in the plnkr. If you infact try to add the space again in myApp declaration you will see the following error message in the console.
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
As you can deduct from the error log, the app declaration in the script.js wasn't matching with the one in the ng-app directive in index.html, so the app wasn't working.
Related
I am receiving the following error:
Unhandled exception at line 24, column 180 in
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
0x800a139e - JavaScript runtime error: [$injector:nomod]
http://errors.angularjs.org/1.4.8/$injector/nomod?p0=undefined,
I have my scripts loaded within the page and am not referencing any JavaScript files except for the app.js and module for controllers within the project like below:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="Scripts/someApp.js"></script>
<script src="Scripts/someModule.js"></script>
<title>Box labeling Program</title>
</head>
<body ng-app="someApp">
<div ng-controller="someCtrl">
</div>
</body>
</html>
The angularJS that I thinking I need below (someApp.js):
angular.module('someApp'['someModule'])
.config([function () {
console.log("Config hook")
}])
.run([function () {
console.log("Run the hook");
}])
There seems to be an issue with angular.min.js, it does not seem to know what object it needs from the reference. I have changed the placement of the script to below the body tag, though this does not seem to change anything.
Also, here is the what I suspect that I need to use for the creating controllers,
angular.module('someModule', [])
.config([function () {
console.log("Some Module:: config");
}])
.run([function () {
console.log("Some Module:: running");
}])
.controller('SomeCtrl', ['$scope', function ($scope) {
$scope.theName ="Julie"
}])
}])
If this is your actual code then you are missing a comma between 'someApp' and the injected dependency ['someModule']. Although angular gives pretty generic error messages you can infer something to this point by the fact that it is a runtime error. That suggests an error in code not in logic. it also states: [$injector:nomod]. Which means there is no module to inject.
If this is just an approximation of your code and not the actual code then we really can't help you. I only say this because what you've provided is exceptionally generic and is either an exercise you're performing or your attempt to hide code for some reason. If that's the case then our ability to help is limited.
I'm trying to display a list of files which the user selects using the input[type=file].
HTML
<div ng-app="myApp">
<div ng-controller="UploadFilesCtrl">
<input type="file" onchange="angular.element(this).scope().uploadFiles(this)" multiple />
<ul>
<li ng-repeat="name in filenames">
{{name}}
</li>
</ul>
<button ng-click="test()">PRINT</button>
</div>
</div>
JS
app = angular.module('myApp');
app.controller('UploadFilesCtrl', ['$scope', function($scope){
$scope.uploadFiles = function(element){
var files = element.files;
var filenames=[];
for (i=0; i<files.length; i++){
filenames.push(files[i].name);
}
$scope.files = files;
$scope.filenames = filenames;
console.log(files, filenames);
};
$scope.test = function(){
console.log($scope.files, $scope.filenames);
}
}]);
From some reason the list never gets updated.
The filenames and files variables in the $scope never get updated outside of the uploadFiles function (When I click the PRINT button after selecting file I get undefined).
Any ideas?
Thanks!
You don't need $scope.$apply()
...............................................................................................................................................................
Your codes are looking very nice. and it's should be working if you did my below thing.
But you have missed only one thing. but that's main thing.
I think you may be got this below error
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
please verify in your browser console window, if you got this error,then Please try this
app = angular.module('myApp',[]);
instead of
app = angular.module('myApp');
You have missed empty sub models in main model('myApp',[]);
All other codes looks well.
Update :
Please see this fiddler Demo , Now your selected files names are displayed when you click print button.
Use $scope.$apply() to update your $scope objects
...
$scope.files = files;
$scope.filenames = filenames;
$scope.$apply();
console.log(files, filenames);
...
Rest is working fine.
EDIT:
RGraham is correct. This is not a full proof solution. You should use directive instead. But just for a work around you can do a check if digest is in progress like this :
if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
$scope.$apply();
}
Updated fiddle : http://jsfiddle.net/Sourabh_/HB7LU/13086/
EDIT The code is all correct, the problem was because of including 'ngTouch', see my own answer below.
I am probably making some stupid mistake here, but for the life of me I cannot find it.
I have this piece of markup, which is correctly wired up with a controller:
<input type="text" ng-change="doStuff()" ng-model="stuff"/>
<button ng-click="doStuff()">doStuff</button>
The controller code:
console.log('Hi from controller');
$scope.stuff = "something";
$scope.doStuff = function() {
alert('doing stuff');
}
The problem is nothing happens when I click the button. If I change the input field, I get the alert, so ng-change works, but ng-click does not.
Let me know if this is not enough information, but I would not know what else to provide, and the general setup seems to be working fine...
The rest of the HTML does not contain any Angular directives, and it is loaded like this in myModule.config:
$stateProvider
.state('stuff', {
templateUrl: 'pages/stuff.html',
url: '/stuff',
controller: 'StuffCtrl'
})
and the controller is defined like this:
angular.module('myModule')
.controller('StuffCtrl', function ($scope) {
// above code
});
It turned out that the problem was with another dependency 'ngTouch'. I did not use it, but still it was loaded. My module did not even depend on it. (I am using that admin site template from here: http://startangular.com/product/sb-admin-angular-theme/). After removing loading of the ngTouch it worked as expected. I will file this as a bug to both projects as well... Thanks for your help!
I seem to be having trouble getting my directive to work, I think I may be registering it incorrectly, but I can't seem to figuire out how. Possibly the naming convention?
Here's what I have -
My Directive -
'use strict';
angular.module('demoApp')
.directive('packeryAngular', ['$rootScope', '$timeout',
function($rootScope, $timeout) {
return {
restrict: 'A',
scope: true,
link: function(scope, element, attrs) {
};
}
]);
On my div, I just call it like so
<div packeryAngular>
However, when I call it just like this, nothing seems to be happening. My first assumption was that I needed to register on my app like so
angular.module('demoApp', [ 'packeryAngular ']
However, when I do that I get the error in the console of :
Error: [$injector:modulerr] Failed to instantiate module packeryAngular due to:
Error: [$injector:nomod] Module 'packeryAngular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
So, I'm pretty new to this but I'm not entirely sure what I'm doing wrong here, I've tried to copy other working examples and can't seem to get it working. Would appreciate any help, and thank you very much for reading!
You dont need to inject the directive , you just need to use it in html .Second Word of Directive with capital first letter becomes small proceeding with a hyphen,So on all next Capital first letters will become small and will be preceded with hyphen like yourCustomDirective becomes your-custom-directive
<div packery-angular>
get rid of injecting it in module
angular.module('demoApp', []);
You must put the following attribute on your node:
<div packery-angular>
When registering your directives, your names must use the lower camel case form. But HTML does not deal well with upper case letters in attribute names, so AngularJS expects upper case letters to be replaced by a dash followed by their corresponding lower case letter.
So your directive name in javascript code is yourDirectiveName, but in the HTML code, it must be referred as your-directive-name.
I am discovering angularJS, but I get an error Argument 'LawContrl' is not a function, got undefined. In my form, I have in my rails app
%div{"ng-controller" => "LawContrl"}
=form-for ...
%li{"ng-repeat"=>"entry in entries"} {{entry.name}} //I am using haml file
in my laws.js.coffee file, I have
#LawContrl = ($scope) ->
$scope.entries = [
{ name: "hi"}
{name: "ho"}
]
Ok, I think I got it. I don't know what ide you're using, but rename (or refactor then rename if you're using Eclipse or Rubymine) your application.js.coffee to application.js and everything must be working just fine. Btw, you should declare some LawContrl module in your angularJS so the controller can be passed to the view
Not sure what it could be, some things to check that might help with debugging this:
angular.js library script is included only once in the page
LawContrl script is included in the page after angular.js
ng-app attribute (it can be empty) is present in the HTML
If ng-app has a value, e.g. ng-app="foo", then LawContrl should be part of the foo module