angular.module('myApp')
.controller('pancakeController', ['$scope', '$window', function($scope, $window) {
$scope.panCakes = [];
$scope.removePancake = function(index) {
if($window.confirm('are you sure?')) {
$scope.panCakes.splice(index, 1);
} else {
$scope.panCakes.splice(index, 1);
}
};
}]);
myApp is already defined in another file. I'm using angular.module('myApp') to grab a reference to it.
Trying to use window.confirm() to confirm the user before deleting a panCake but the confrim box does not popup in Chrome 37.0.2062.94 but does work in Chrome Canary.
I'm using the AngularJS $window object, but using regular window.confirm does not work either. Is there something that I'm missing in my code or is just a bug in that particular version of Chrome?
The most probable cause is that you have at some point checked the little checkbox saying that you don't want to see any more alerts/confirms/prompts from this page.
(Among other solutions, closing the tab and reopening the page in a new tab should restore alerts/confirms/prompts.)
I am working on the same version of chrome as you are and the above code was not working in the fiddle as you had syntax error in the definition of the angular.module
It should be
angular.module('myApp',[])
Instead of
angular.module('myApp')
Working Fiddle
Related
I want to remove previous state from history so that clicking back will take user two states back. Here is what I did.
app.controller('postBlogCtrl', function($scope, $state, $http, $ionicLoading,
$rootScope, $filter, genericServices, $ionicHistory){
if($rootScope.previousStateName != "app.community-feed"){
$ionicHistory.removeBackView();
}
};
I am getting an error TypeError: $ionicHistory.removeBackView is not a function.
It seems like your version of ionic is too old .
Use "ionic info" into the CLI to check your version .
I know for sure that this removeBackView() is not present in ionic 1.2.4 but present in 1.2.7
.Alternatively you can check www/lib/ionic/js/ionicbundle.js . If this file contains the removeBackView() method then something else seems to be the problem . If not , just upgrade the ionic version . You can visit http://code.ionicframework.com/ to check the ionicbundle.js of different versions .Choose a version whose ionicbundle.js file has this function
I was having this problem where removeBackView() didn't work. So instead I added this in the previous state leading to the state that I want to remove the back-button from:
$ionicHistory.nextViewOptions( {
disableBack : true
} );
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.
I basically copied the code from https://material.angularjs.org/latest/demo/toast
and wanted to use the "simpleToast" for first testing.
I keep getting "Error: $mdToast.showSimple is not a function" in firebug. Do I need to install that somehow??
Google didn't gave me any results for other people having this problem so I start to have the feeling that I did something elementary completely wrong.
$mdToast is included in my parameter list of my controller function and ng-material is included and works fine (except this toast thing).
Can anyone help?
Since you cannot post the code, Here is the sample MdToast which is made with material Design.
Code:
angular.module('MyApp', ['ngMaterial'])
.controller('MyCtrl', function($scope, $mdToast) {
$scope.message = "Hello World";
$scope.showToast = function() {
var toast = $mdToast.simple()
.content('Hello world')
.action('OK')
.highlightAction(false)
.position('left top right');
$mdToast.show(toast);
};
});
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 have angularJS(AngularJS v1.3.0-beta.3) application that crashes in IE10 compatibility mode. It works fine in FF, Chrome and IE11. Here is what I get as an error in console:
Multiple directives [login, login] asking for 'login' controller on: <div>
to set state of application, I create a node:
link: function ($scope, $element, $attrs) {
....
$element.html('<login></login>');
$compile($element.contents())($scope); // crash happens here
....
}
Here is my login directive:
widgets.directive('login', ['$compile', '$http', 'resourceLoader', function ($compile, $http, resourceLoader) {
return {
restrict: 'AE',
replace: true,
template: '<div></div>',
controller: function ($scope, $element) {
$scope.user.isLogged = false;
$scope.user.password = undefined;
$scope.submitLogin = function () {
// code that goes to server
};
},
link: function ($scope, $element, $attrs) {
resourceLoader.get('templates', 'profile', 'unlogged/login', 'jquery.min', function (template) {
$element.html(template);
$compile($element.contents())($scope);
});
}
};
}]);
Any ideas? Thanx.
The main issue is Angular 1.3 does not support older versions of Internet Explorer, more specifically IE8 and less. Putting IE10 in compatibility mode will make the browser act as if it were an older browser for certain layouts and features. The backwards compatability issues are likely the culprit here.
The suggestion by Angular is to remain in a version less than 1.3 to ensure compatability.
References:
See Angular's post on the 1.3 update and review Compatibility Mode settings for further reading on the issues.
Have you tried changing the restriction on the directive from EA to just E, or (probably better for compatability) just A and then using <div data-login="true"></div>?
It looks like something strange is going on with how the html is being parsed - I expect that it's probably adding an attribute for its own use in compatibility, which is screwing everything up.
If this doesn't work, you'd be much more likely to get a correct answer if you provide a plunker or a fiddle to demonstrate the issue more clearly.
Add this line
if ( name === 'login' ) console.log(name, directiveFactory.toString());
at this line
If it prints out twice, you are really loading the directive twice. With the directiveFactory's source code printed out, you will also see if it's the same directive loaded twice or two directives with the same name.
Give id="ng-app" where you are assigning your module name ng-app="module". That will support IE.
Adding below line in index.html's head section solved my problem:
<meta http-equiv="x-ua-compatible" content="IE=edge">
For more info : https://stackoverflow.com/a/46489212/698127