Skip to content

Instantly share code, notes, and snippets.

@magnet88jp
Last active August 29, 2015 14:20
Show Gist options
  • Select an option

  • Save magnet88jp/b627279d609fa69a2716 to your computer and use it in GitHub Desktop.

Select an option

Save magnet88jp/b627279d609fa69a2716 to your computer and use it in GitHub Desktop.
AngularJS Factory Test1 with modal
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script>
var testApp = angular.module('app', ['ui.router', 'ui.bootstrap']);
testApp.factory('TestFact1', function () {
return {
"elem1" : "a",
"elem2" : "b"
}
});
testApp.controller('TestCtrl1', ['$scope', '$modal', '$stateParams', 'TestFact1', function ($scope, $modal, $stateParams, TestFact1) {
$scope.test1 = TestFact1;
/*
$scope.test1 = {
elem1 : "a1",
elem2 : "b1"
}
*/
$scope.setC = function() {
// TestFact1.elem1 = "c";
$scope.test1.elem1 = "c";
}
$scope.openModal = function() {
$modal.open({
template: $('#view3').html(),
controller: "TestCtrl3",
scope: $scope,
backdrop: 'static'
})
}
}]);
testApp.controller('TestCtrl2', ['$scope', 'TestFact1', function ($scope, TestFact1) {
$scope.test1 = TestFact1;
/*
$scope.test1 = {
elem1 : "a2",
elem2 : "b2"
}
*/
$scope.setD = function() {
// TestFact1.elem2 = "d";
$scope.test1.elem2 = "d";
}
}]);
testApp.controller('TestCtrl3', ['$scope', '$modalInstance', 'TestFact1', function ($scope, $modalInstance, TestFact1) {
$scope.test1 = TestFact1;
$scope.setE = function() {
TestFact1.elem2 = "E";
}
$scope.closeModal = function() {
console.log('TestFact1=' + JSON.stringify(TestFact1));
$modalInstance.close();
}
}]);
testApp.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('index', {
url: "/",
views: {
"main": { template: $('#view1').html() }
}
})
.state('view1', {
url: "/view1",
views: {
"main": { template: $('#view1').html() }
}
})
.state('view2', {
url: "/view2",
views: {
"main": { template: $('#view2').html() }
}
})
}]);
</script>
</head>
<body ng-app="app">
<h1>Factory テスト</h1>
<ul>
<li ui-sref="index"><a>index</a></li>
<li ui-sref="view1"><a>view1</a></li>
<li ui-sref="view2"><a>view2</a></li>
</ul>
<div ui-view="main"></div>
<script type="text/ng-template" id="view1">
<div ng-controller="TestCtrl1">
<h2>TestView1</h2>
<p>{{test1.elem1}}</p>
<p>{{test1.elem2}}</p>
<button ng-click="setC()">setC</button>
<button ng-click="openModal()">openModal</button>
</div>
</script>
<script type="text/ng-template" id="view2">
<div ng-controller="TestCtrl2">
<h2>TestView2</h2>
<p>{{test1.elem1}}</p>
<p>{{test1.elem2}}</p>
<button ng-click="setD()">setD</button>
</div>
</script>
<script type="text/ng-template" id="view3">
<div>
<h2>TestView3</h2>
<p>{{test1.elem1}}</p>
<p>{{test1.elem2}}</p>
<button ng-click="setE()">setE</button>
<button ng-click="closeModal()">closeModal</button>
</div>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment