index.html is as:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>HTTP Request</title>
<script src="angularjs"></script>
<script src="appjs"></script>
</head>
<body>
<p>Data sharing example :</p>
<div ng-controller="firstCtrl">
<input type="text" ng-model="numval">
<p>Inside first DIV : {{numval}}</p>
</div>
<div ng-controller="secondCtrl">
<input type="text" ng-model="numval">
<p>Inside second DIV : {{numval}}</p>
</div>
</body>
</html>
And app.js is as :
var myApp = angular.module('myApp', []);
myApp.service('sharedata', function() {
return 'common data';
});
myApp.controller('firstCtrl', ['$scope', '$http', 'sharedata', function($scope, $http, sharedata) {
alert('first');
$scope.numval='first';
$scope.numval=sharedata;
}]);
myApp.controller('secondCtrl', ['$scope', '$http', 'sharedata', function($scope, $http, sharedata) {
alert('second');
$scope.numval='second';
$scope.numval = sharedata;
}]);
I am unable to find the stupid mistake....! I am expecting that whether I change data in first input box or in second, I should see the changes reflected in both the DIV tags.
Try the following:
var myApp = angular.module('myApp', []);
myApp.service('sharedata', function() {
return {numval: "Something"};
});
myApp.controller('firstCtrl', ['$scope', '$http', 'sharedata',
function($scope, $http, sharedata) {
alert('first');
$scope.sharedata = sharedata;
}]
);
myApp.controller('secondCtrl', ['$scope', '$http', 'sharedata',
function($scope, $http, sharedata) {
alert('second');
$scope.sharedata = sharedata;
}]
);
And the HTML, both <div>s:
<input type="text" ng-model="sharedata.numval">
<p>Inside ___ DIV : {{sharedata.numval}}</p>
Your mistakes:
$scope.numval='first'; $scope.numval=sharedata; doesn't make sense...
The sharedata service is returning a value; you cannot change a value; you should return a reference (i.e. the object) that contains the value. That way both scopes can write to it.
Related
I am using angularjs. i have one header.html and I have merged that html page into another html using ng-include.
Also, I have one dropdown list in header.html and I want the selected value (from dropdown) list to be displayed. How can I do this?
header.html
<html ng-app="app" >
<head>
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="controller/headerctrl.js"></script>
</head>
<body ng-controller="headerctrl">
<select id="valueid" class="form-control" required typeof="text" ng-model="valuselect" form="Floorform" >
<option value="">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</body>
</html>
Content.html
<html ng-app="app" >
<head>
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="controller/Contentctrl.js"></script>
</head>
<body >
<div id="header" ng-controller="headerctrl" ng-include="'header.html'">
</div>
<div id="sidebar" class="sidebar responsive ace-save-state" ng-controller="Contentctrl" >
//hi this content page here i get header dropdown selected value
</div>
</body>
</html>
HeaderController
var app = angular.module("app", []);
app.controller('headerctrl', ['$scope', '$http', '$window',
function ($scope, $http, $window, ) {
}]);
content Controller
var app = angular.module("app", []);
app.controller('contentctrl', ['$scope', '$http', '$window',
function ($scope, $http, $window, ) {
}]);
You can use services for it
app.factory('myService', function() {
var savedData = [];
return {
set: set,
get: get
}
function set(data) {
savedData.push(data)
}
function get() {
return savedData;
}
});
Here is plnkr
https://plnkr.co/edit/EIqgNJRgeOwY0zDsIDoU?p=preview
I am getting error when i use ngSanitize.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.run(function($templateCache) {
$templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
});
myApp.controller("crt", ['$scope', '$templateCache', '$compile',
function($scope, $templateCache, $compile) {
//$templateCache.remove("templateCache.html");
$scope.caches = $compile($templateCache.get("templateCache.html"))($scope);
}
])
</script>
<body ng-app="myApp" ng-controller="crt">
<span ng-bind-html="caches"></span>
</body>
Help me out what wrong in this code
Does this works with your files?
I removed ngSanitize dependency, injected $sce in your controller and used ng-bind-html-unsafe in HTML.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
});
myApp.controller("crt", ['$scope', '$templateCache', '$compile', '$sce', function($scope, $templateCache, $compile, $sce) {
//$templateCache.remove("templateCache.html");
$scope.caches = $compile($templateCache.get("templateCache.html"))($scope);
}
])
</script>
<body ng-app="myApp" ng-controller="crt">
<span ng-bind-html-unsafe="caches"></span>
</body>
ng-bind-html on bind safe html like
<b>,<p>,<h1> etc
But not like input,button tags
in that case you can use angular.element()
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateCache.html', '<button>Click me</button> This is the content of the template');
});
myApp.controller("crt", ['$scope', '$templateCache', '$compile','$rootElement', function ($scope, $templateCache, $compile, $rootElement) {
var cache = $compile( $templateCache.get("templateCache.html"))($scope);
angular.element($rootElement).find("span").append(cache);
}])
</script>
<body ng-app="myApp" ng-controller="crt">
<span ></span>
</body>
I am trying to integrate Xeditable table. But when I code something like below its not diplaying any value.
JS code
app.controller('XeditableCtrl', ['$scope', '$filter', '$http','editableOptions','editableThemes',
function($scope, $filter, $http,editableOptions,editableThemes){
editableThemes.bs3.inputClass = 'input-sm';
editableThemes.bs3.buttonsClass = 'btn-sm';
editableOptions.theme = 'bs3';
$scope.test = 'janan';
}]);
HTML code
<div class="wrapper-md" ng-controller="XeditableCtrl">
<h4>Test Value is </h4>
{{ test }}
</div>
working example her : http://plnkr.co/edit/Sez91V5vsWVhCEPl7rBk?p=preview
i remove the dependency for 'editableOptions','editableThemes' because i don't have ther code.
JS
angular.module('ngAppListDemo', []).
controller('XeditableCtrl', ['$scope', '$filter', '$http',
function($scope, $filter, $http){
//editableThemes.bs3.inputClass = 'input-sm';
//editableThemes.bs3.buttonsClass = 'btn-sm';
//editableOptions.theme = 'bs3';
$scope.test = 'janan';
}]);
HTML
<!doctype html>
<html ng-app="ngAppListDemo">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="wrapper-md" ng-controller="XeditableCtrl">
<h4>Test Value is </h4>
{{ test }}
</div>
</body>
</html>
It seems that some error occurred before reaching $sscope.test = 'janan'. I have tried your example by removing editableoption and editablethemes code and it worked fine.
app.controller('XeditableCtrl', ['$scope', '$filter', '$http',
function($scope, $filter, $http,){
$scope.test = 'janan';
}]);
Use console tab of inspect element to check error occurred. Hope this helps.
I'm developing html 5 mobile app using visual studio cordova, angular js and ionic framework. In that, I need to save some values to localStorage. I followed some articles but there is an error throwing when saving values to the local storage.
<!doctype html>
<html ng-app="myApp">
<head> <title>Test app</title></head>
<body ng-app="myApp" ng-controller="MainCtrl">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-local-storage.js"></script>
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<script>
var myApp = angular.module('myApp', ['ionic', 'LocalStorageModule']);
myApp.controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
</script>
<div>
<input type="button" ng-click="test()" value="add new">
</div>
</body>
</html>
It throws ReferenceError: isUndefined is not defined at Object.addToLocalStorage
Any idea??
Here is a plunker working with your application plnkr
var myApp = angular.module('myApp', ['ionic' ,'LocalStorageModule']).config(function(localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('cars')
.setStorageType('localStorage')
.setNotify(false, false);
}).controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
I am using two controllers(In diffrent js files) for different views.
My main HTML
================================================================================
<html ng-app="MyApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="/JS/utilityJS/angular.min.js"></script>
<script type="text/javascript" src="/JS/utilityJS/angular-route.js"></script>
<script type="text/javascript" src="/JS/app.js"></script>
<script type="text/javascript" src="/JS/controllerLocation.js"></script>
<script type="text/javascript" src="/JS/controllerItem.js"></script>
</head>
<body>
<div id="populateDiv" >
<div id="header" ng-include src="'/pages/header.html'"></div>
<div id="footer" ng-include src="'/pages/footer.html'"></div>
<div id="groceryBg" class=" mainContentBg" style=""> </div>
<div ng-view=""></div>
</div>
</body>
</html>
App.js // main js file
angular.module('controllersModule', []);
var AppModule = angular.module('MyApp', ['ngRoute','controllersModule']);
AppModule
.service('locationService', function ($http) {
......
}
AppModule .config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/Load/', {
templateUrl: 'location.html',
controller: 'locationCtrl'
}).
when('/Items/', {
templateUrl: 'items.html',
controller: 'itemsCtrl'
}).
otherwise({
redirectTo: '/Load/'
});
}]);
controllerLocation.js // location controller
angular.module('controllersModule').controller('locationCtrl', ['$rootScope', '$scope','$route', '$http','$location','locationService', '$routeParams',
function($rootScope, $scope, $route,$http,$location,locationService, $routeParams)
{
$location.path("/Items");
}
controllerItem.js // Item controller
angular.module('controllersModule').controller('itemsCtrl' ['$rootScope', '$scope', '$route', '$http', 'locationService', '$routeParams',
function($rootScope, $scope, $route, $http, locationService, $routeParams)
{
console.log("Scope id Items is:- " + $scope.$id);
}
location.html // Location html
<html>
<head>
</head>
<body>
<div>
Location.....
</div>
</body>
</html>
items.html
<html>
<head>
</head>
<body>
<div>
Items.....
</div>
</body>
</html>
================================================================================
When I am calling /Load and debugging its showing the location.html content and loading controllerLocation as well. But after $location.path("/Items"); its loading items.html but not loading controllerItem and throwing erroenter code herer http://errors.angularjs.org/1.2.22/ng/areq?p0=itemsCtrl&p1=not%20aNaNunction%2C%20got%20undefined.
Can you please help in finding what is the problem?
You forgot a comma and a closing square bracket in the declaration of itemsCtrl
angular.module('controllersModule').controller('itemsCtrl', ['$rootScope', '$scope', '$route', '$http', 'locationService', '$routeParams',
function($rootScope, $scope, $route, $http, locationService, $routeParams)
{
console.log("Scope id Items is:- " + $scope.$id);
}]);