I have a situation (modal popup) that classical link using <a href> does not work, so I need to simulate that link behavior in a <div>.
CODEPEN link
var myApp = angular.module('myApp', []);
myApp.controller('testCtrl', ['$scope', '$window', function($scope, $window) {
$scope.greeting = 'Hola!';
$scope.myAlert = function(event) {
console.log('this is the $scope.greeting');
console.log($scope.greeting);
console.log('this is the $window.location.href:');
console.log($window.location.href);
console.log('this is the event.target.dataset.href:');
console.log(event.target.dataset.href);
$window.location.href = event.target.dataset.href;
}
}]);
<div ng-app="myApp" ng-controller="testCtrl">
<div data-href="http://test.com" ng-click="myAlert($event);">CLICK ME!</div>
<div ng-click="$window.location.href='http://test.com';">DIRECTT LINK!</div>
</div>
Why the second div does nothing on click ?
NB.
I don't need to open the link in the popup or the new widow, my div is already in a popup, so I need just to open that link in the same widow like an a href does, is all I need.
In other words, I need to open a link without using a "a href". The URL is in the generated HTML, so I can't put the url in the javascript, that is an independent file...
Your code is not working because html does not recognises $window
Try this in html
<div ng-app="myApp" ng-controller="testCtrl">
<div data-href="http://test.com" ng-click="myAlert($event);">CLICK ME!</div>
<div ng-click="openLink('http://test.com');">DIRECTT LINK!</div>
</div>
in script:
var myApp = angular.module('myApp', []);
myApp.controller('testCtrl', ['$scope', '$window', function($scope, $window) {
$scope.greeting = 'Hola!';
$scope.myAlert = function(event) {
console.log('this is the $scope.greeting');
console.log($scope.greeting);
console.log('this is the $window.location.href:');
console.log($window.location.href);
console.log('this is the event.target.dataset.href:');
console.log(event.target.dataset.href);
$window.location.href = event.target.dataset.href;
}
$scope.openLink = function(link){
$window.location.href = link;
};
}]);
use <div onclick="window.location.replace('http://test.com')"></div>
Related
I am using Angularjs in asp.net core website which has jquery as well. AngularJS is being used for a small part of the website. Below is the AngularJS HTML
(function () {
var app = angular.module('dashBoardApp', []);
console.log(app);
var xx = app.controller('dashBoardController', ['$scope', function ($scope) {
$scope.value = 'Test';
}]);
})();
<div ng-app="dashBoardApp">
<div ng-controller="dashBoardController">
<p>{{5+5}}</p>
</div>
</div>
I must be doing something stupid. But unable to figure out.
You need to add a reference to the angular lib
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
Then it works like a charm
(function () {
var app = angular.module('dashBoardApp', []);
console.log(app);
var xx = app.controller('dashBoardController', ['$scope', function ($scope) {
$scope.value = 'Test';
}]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<div ng-app="dashBoardApp">
<div ng-controller="dashBoardController">
<p>{{5+5}}</p>
</div>
</div>
I am wondering at the dual behaviour of $scope. In the below script I am getting value of name as alert. But in my ionic app the same code alerts undefined.
I googled the problem and found this link as a solution where it states that we need to use dot(.) in order to get the value in ng-model. What is the difference between two.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.a =function a(){alert($scope.name);}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name" ng-blur="a()">
</div>
Try changing your controller function as below:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.a =function(){
alert($scope.name);
}
});
Actually it does work with Ionic,
angular.module('starter.controllers', [])
.controller('myCtrl', function($scope) {
$scope.a = function a() {
alert($scope.name);
}
})
DEMO
Solution :
"If you use ng-model, you have to have a dot in there."
Make your model point to an object.property and you'll be good to go.
Controller
$scope.formData = {};
$scope.check = function () {
console.log($scope.formData.searchText.$modelValue); //works
}
Template
<input ng-model="formData.searchText"/>
<button ng-click="check()">Check!</button>
This happens when child scopes are in play - like child routes or ng-repeats.
The child-scope creates it's own value and a name conflict is born as illustrated here:
See this video clip for more: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s
.
And that is referred from below links :
Other Solutions
Use this keyword instead of $scope, More details
And also you can get more details from this below two discussions
Ng-model does not update controller value
Why is my ng-model variable undefined in controller?
Update Solution 1 :
Please declaring the blank object first at the top of your controller:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "";
$scope.a = function(){alert($scope.name);}
});
I hope these will be helps to you.
Try to use json object.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.user = {'name':''};
$scope.a =function a(){alert($scope.user.name);}
});
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="user.name" ng-blur="a()">
</div>
I am new to Angular js.I have seen the similar question, but I dont understand that.
I have 2 controllers
userControllers.controller('RatingCtrl', function($scope,$http,$rootScope,$route)
userControllers.controller('otherProfileCtrl', function ($scope, $routeParams, $rootScope, $http, $location, $window, $timeout,$uibModal, $compile)
RatingCtrl and otherProfileCtrl, this two modules are inter-related. My need is that, I have reload RatingCtrl from otherProfileCtrl using $route.reload();.Is there is any way to do this without uisng service?plz help
You could pass events from one controller to another in order to achieve this. You would then do something like:
var app = angular.module('myApp', []);
app.controller('firstController', ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.text = 'Initial text';
$scope.changeText = function(message) {
$scope.text = message;
};
$rootScope.$on('customEvent', function(event, message) {
$scope.changeText(message);
});
}
]);
app.controller('secondController', ['$scope',
function($scope) {
$scope.message = 'Message from second controller';
$scope.sendEvent = function() {
$scope.$emit('customEvent', $scope.message)
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="firstController">
<h2>This is the fist controller:</h2>
<p>{{text}}</p>
</div>
<div ng-controller="secondController">
<h2>This is the second controller:</h2>
<input type="text" ng-model="message" />
<br>
<button ng-click="sendEvent()">Send message</button>
</div>
</div>
Here, the firstController listens to events propagated to the $rootScope, and the secondController sends the message. That is the functionality that you are looking for.
That being said, you would be much better off implementing shared behaviour in a service, since keeping track of all your custom events can be particularly tough.
Hope this helps.
I have the need to add in some items from my scope into some inline script I need to run on my site.
From what I have tried in my demo it doesn't look possible to use the values from my scope in inline script tags. What is the best way to achieve this?
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
'{{aaa}}'
<script>console.log('{{aaa}}');</script>
</div>
</div>
<script>
'use strict';
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.aaa = 'bbb';
}]);
</script>
Console returns '{{aaa}}'. I want it to return bbb.
<div id="idd" ng-controller="MainCtrl">
'{{aaa}}'
<button ng-click="$log.log(aaa)">log</button>
</div>
</div>
<script>
'use strict';
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope','$log',
function($scope, $log) {
$scope.aaa = 'bbb';
$scope.$log = $log;
//console.log($scope.aaa);
//console.log($scope.$parent);
}
]);
</script>
I have a little problem with controllers in AngularJs.
I have one controllers and some other controllers into the first controller. Basically i have this :
<body ng-app="scopeInheritance">
<div class="spicy">
<div ng-controller="MainController">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="ChildController">
<p>Good {{timeOfDay}}, {{name}}!</p>
<p ng-if="valide()">Heelo i'm the if</p>
</div>
</div>
</div>
</body>
And my .js
var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';
$scope.testCtrl1 = true;
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
$scope.name = 'Mattie';
$scope.timeOfDay = 'aternoon';
$scope.test = true;
$scope.valide = function () {
alert("i'm the function validate");
if($scope.testCtrl1 && $scope.test)
return true;
};
}]);
I want to call the function valide() to show some text. The function can return true or false depending of the value one the controller ChildController
The problem is : the function valide() is calling at every controllers.
This is normal, but how can i limite that ? The function valide() need to be call when the controller ChildController is load.
Maybe it was unclear, i made a live exemple : http://plnkr.co/edit/AM9loq4VRkL16mX8LR1v?p=preview
You can see two alert.
EDIT = valide() return true or false, depending on the value of the controllers ChildController and MainController