I am trying to make a modal which can be instantiated from multiple places in the app. from the example given here: Angular directives for Bootstrap the modal controller is in the same file as the controller who instantiates the modal. I want to separate the modal controller from the "app" controller.
index.html:
<!DOCTYPE html>
<html ng-app="modalTest">
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="modalTestCtrl">
<button ng-click="openModal()">Modal</button>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="modalTest.js"></script>
</body>
</html>
The controller:
var app = angular.module('modalTest', ['ui.bootstrap']);
app.controller('modalTestCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'modalCtrl',
size: 'sm'
});
}
}]);
// I want this in another JavaScript file...
app.controller('modalCtrl', ['$scope', function($scope) {
$scope.hello = 'Works';
}]);
modal.html:
<div ng-controller="modalCtrl">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<h1>{{hello}}</h1>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
Is there any way to put the modalCtrl in another JavaScript file and somehow inject the controller (modalCtrl) into the modalTestCtrl ?
BR
Of course, you can do it. First of all you should use a function declaration.
// modalCtrl.js
// This file has to load before modalTestCtrl controller
function modalCtrl ($scope) {
$scope.hello = 'Works';
};
Then, change the modalTestCtrl like:
app.controller('modalTestCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: modalCtrl, //This must be a referance, not a string
size: 'sm'
});
}
}]);
With the changes above, you code has to work.
Related
Hello I am developing Angularjs Application. I am trying to display Toaster messages in my angular controller. I refereed http://angular-js.in/angular-toastr/. I am facing below issue. I am not able to call success,info etc notification from controller and i am getting annot read property 'success' of undefined error. I have tried as below.
In index.html i have added below code.
<!--Toaster-->
<script src="https://unpkg.com/angular-toastr/dist/angular-toastr.tpls.js"></script>
<link rel="stylesheet" href="https://unpkg.com/angular-toastr/dist/angular-toastr.css" />
<!--Toaster-->
this is my main.js
var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
//ui-routing states here});
app.controller('RoslpAppController', ['$scope', '$translate', function ($scope, $translate, toastr) {
toastr.success('Hello world!', 'Toastr fun!');
$scope.clickHandler = function (key) {
$translate.use(key);
};
}]);
May I know why I am facing issues here? any help would be appreciated. thank you
add toastr as string dependency to the controller.
change this
app.controller('RoslpAppController', ['$scope', '$translate',function ($scope, $translate, toastr) {
to this
app.controller('RoslpAppController', ['$scope', '$translate','toastr',function ($scope, $translate, toastr) {
You are missing toastr in controller definition.
app.controller('RoslpAppController', ['$scope', '$translate','toastr', function ($scope, $translate, toastr) {
Try this
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css">
<script>
var app=angular.module("myapp", []);
app.controller("namesctrl", function($scope){
$(function () {
$('#error').click(function () {
// make it not dissappear
toastr.error("Noooo oo oo ooooo!!!", "Title", {
"timeOut": "0",
"extendedTImeout": "0"
});
});
$('#info').click(function () {
// title is optional
toastr.info("Info Message", "Title");
});
$('#warning').click(function () {
toastr.warning("Warning");
});
$('#success').click(function () {
toastr.success("YYEESSSSSSS");
});
});
});
</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl">
<input type="button" value="Error" id="error" />
<input type="button" value="Info" id="info" />
<input type="button" value="Warning" id="warning" />
<input type="button" value="Success" id="success" />
<br><br><br><br>
See official example: <a href='http://codeseven.github.io/toastr/demo.html' target='blank'>Here</a>
</body>
</html>
I want to use UI Bootstrap Collapse in my custom directive <collapse>
However, I get this Error: [ng:areq] Argument 'CollapseDemoCtrl' is not a function, got undefined
Here is my Plunkr
What am I doing wrong?
Remove ng-controller from template.
Define controller inline:
controller: ['$scope', function($scope){
$scope.isCollapsed = false;
}]
Plunk
Another option is to define controller:
.controller('CollapseDemoCtrl', function($scope){
$scope.isCollapsed = false;
});
and refer to it in directive: controller: 'CollapseDemoCtrl'
Plunk
angular.module('myApp.collapse', []);
angular.module('myApp', [
'ngAnimate',
'myApp.collapse',
'ui.bootstrap'
]);
(function(){
'use strict';
angular.module('myApp.collapse',[])
.controller('CollapseDemoCtrl', CollapseDemoCtrl)
.directive('collapse', function(){
return {
restrict: 'E',
templateUrl: 'collapse.html',
controller: 'CollapseDemoCtrl'
};
});
function CollapseDemoCtrl($scope){
$scope.isCollapsed = false;
}
})();
<!doctype html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
<script src="app.js"></script>
<script src="collapse-module.js"></script>
<script src="collapse-directive.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<collapse></collapse>
</body>
</html>
<div>
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
angular.module('myApp.collapse', []);
angular.module('myApp', [
'ngAnimate',
'myApp.collapse',
'ui.bootstrap'
]);
(function(){
'use strict';
angular.module('myApp.collapse').
directive('collapse',['$http', function($http){
console.log("Test")
return {
restrict: 'E',
templateUrl: 'collapse.html',
controller: function ($scope) {
$scope.isCollapsed = false;
}
};
}]);
})();
<!doctype html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
<script src="app.js"></script>
<script src="collapse-module.js"></script>
<script src="collapse-directive.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<collapse></collapse>
</body>
</html>
<div>
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
I have been attempting to get angular routing working and everytime I create a new project and It does not work. I have had it working in some projects but I can never see why my newly created project does not work.
Its probably something obvious, thanks for any help in advance.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Styles.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</head>
<body>
<a href="#/">
<button class="btn btn-danger">Homepage</button></a>
<a href="#/about">
<button class="btn btn-success">About</button></a>
<a href="#/date">
<button class="btn btn-warning">Date</button></a>
<div class="row">
<div ng-view>
</div>
</div>
<script src="SinglePageApp/app.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
app.js file
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
Try this plunker:
http://embed.plnkr.co/L6E4GCe3O0Jh1vqKyGFD/
I've used the example at the angularJS documentation to create your usecase.
You should change the template filepaths, with your own. I also haven't included bootstrap.
If you want to use buttons, then you can use this example in plunkr based on this answer by Josh David Miller(upvote him if you use his directive). Directives are a way to customize html, and here we're using one as an html attribute (you can also use them as standalone elements) to create a hyperlink button.
Here's fiddle for you that works as expected
Not sure why your code is not working, angular has pretty bad debugging tool.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<div>
<a href="#/">
<button class="btn btn-danger">Homepage</button>
</a>
<a href="#/about">
<button class="btn btn-success">About</button>
</a>
<a href="#/date">
<button class="btn btn-warning">Date</button>
</a>
<div class="row">
<div ng-view></div>
</div>
</div>
<script type="text/ng-template" id="pages/homepage.html">
{{homepage}}
</script>
<script type="text/ng-template" id="pages/about.html">
{{about}}
</script>
<script type="text/ng-template" id="pages/date.html">
{{dateNow}}
</script>
Script file looks like this
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
})
.otherwise({redirectTo:'/'});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
angular.bootstrap(document.body, ['app']);
I want to use Angular to create a popover that contains a <textarea> and a <button> to perform an action.
I followed this guide to create my popover with a custom directive.
My problem is that the content in the popover doesn't appear to be attached to the main controller anymore when it is inserted. The contents of the <textarea> does not display with {{ textarea }}, and the ng-click="click()" does not trigger the $scope.click function defined in the controller.
Maybe this is due to the fact that the content of the popover is being set in the directive, instead of being declared in the view1.html document? Any help would be appreciated.
I've made this JSFiddle which demonstrates the issue - it is very slightly simplified from the code below, but the problem is demonstrated just fine.
directives.js:
module.directive('customPopover', [function(){
return {
restrict: 'A',
link: function (scope, el, attrs) {
$(el).popover({
trigger: attrs.popoverTrigger,
html: true,
content: function() {return $('#popover_content').html();},
placement: attrs.popoverPlacement
});
}
};
}]);
pages/view1.html:
<div>
<div id="controls">
<a custom-popover class="btn"
tabindex="0"
popover-html="copyPaste"
popover-placement="right"
popover-trigger="click"
role="button">Copy & paste data</a>
</div>
<div id="popover_content" style="display:none;">
<textarea id="textBox" type="text" ng-model="textarea"></textarea>
<button id="submitDataBtn" ng-click="click()" type="button">Submit</button>
</div>
{{ textarea }}
</div>
controller.js
var module = angular.module("moduleName", ['ngRoute']);
module.controller("SimpleController", function ($scope, gsatfFactory, $sce, $location) {
$scope.click = function() {
$scope.table = $sce.trustAsHtml(gsatfFactory.parseData($scope.textarea));
$location.path('view2');
};
});
module.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/view1.html',
controller: 'SimpleController'
})
.when('/view2', {
templateUrl: 'pages/view2.html',
controller: 'SimpleController'
})
.otherwise({ redirectTo: '/' });
}]);
index.html
<!DOCTYPE html>
<html ng-app="moduleName">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script src="js/controller.js"></script>
<script src="js/factory.js"></script>
<script src="js/directives/directives.js"></script>
</head>
<body>
<div data-ng-view></div>
</body>
</html>
Your content html isn't angular compiled. Use this to compile it:
$compile($('#popover_content').html())(scope);
your directive:
mod.directive('customPopover', function($compile){
return {
restrict: 'A',
link: function (scope, el, attrs) {
$(el).popover({
trigger: attrs.popoverTrigger,
html: true,
content: function() {return $compile($('#popover_content').html())(scope);},
placement: attrs.popoverPlacement
});
}
};
});
I'm trying to implement a modal from angular ui bootstrap. After I implemented it on my web application, I got an unexpected behavior which is the modal does show up after I clicked the text, but what shows up is not the path that I wanted but rather the navbar of the web app.
Here's the code
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<base href='/'>
<!-- load bootstrap from CDN and custom CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<header>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-book"></span>Testing App
</div>
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
<li>Write</li>
</ul>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
angular.module('MyApp', ['ngRoute', 'ui.bootstrap'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
});
$locationProvider.html5Mode(true);
});
controller.js
angular.module('MyApp')
.controller('HomeController', function($scope, $location) {
$scope.data = "Hello Angular";
})
.controller('ModalController', function($scope, $location, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: function() {
},
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
home.html
<div class="container">
<h1>Awesome {{ data }}</h1>
</div>
modal.html (The path that the modal suppose to show);
<h1>Need to show this actually</h1>
The picture, what shows up after i clicked the text that trigger the modal event
Added this:
<script type="text/ng-template" id="modal.html">
<h1>Need to show this actually</h1>
</script>
right after
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
and it works in plunker:
http://plnkr.co/edit/bPuemujbTiX7U8AnY607?p=preview