We had to update the Bootstrap version (bs3 to bs4). We have some issues with Angularjs modal.It only works in bs3.4.1 version not even 3.4.2. Below is a similar piece of code, the problem is,
It looks like a template has been added to the dom, but the modal doesn't appear and behave like a modal. How can I solve this problem. Any help will be really appreciated.
<html>
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
var app = angular.module("app", ['ui.bootstrap']);
app.controller("democontroller", ["$scope", "$modal", function($scope, $uibModal){
$scope.click = function(){
$uibModal.open({
templateUrl: "modal.html",
controller: "modal",
scope: $scope
});
}
}]);
app.controller("modal", modal);
function modal() {
console.log("in modal controller")
}
</script>
</head>
<body>
<div ng-app="app" ng-controller="democontroller">
<button type="button" class="btn btn-default" ng-click="click()">
Open modal
</button>
<script type="text/ng-template" id="modal.html">
<h1>modal</h1>
</script>
</div>
</body>
</html>
If you change your style link to this (in the shaded area below) the modal should work. I got the link from here fyi:
https://getbootstrap.com/docs/3.3/getting-started/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Related
Hey guys i got a problem with implementing ngDialog in my current project.
For testing i have created following working code:
test.php
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog-theme-plain.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.js"></script>
<script src="neuejs.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="openDialog($event)">Open Me!</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Bilder
</div>
</script>
</body>
</html>
and in a seperate neuejs.js:
var app = angular.module('myapp', ['ngDialog']);
app.controller('MainCtrl', function($scope, ngDialog) {
$scope.openDialog = function($event) {
var dialog = ngDialog.open({
template: 'templateId',
scope: $scope,
controller: 'FileController',
$event: $event,
className: 'ngdialog-theme-plain'
});
};
});
This works just fine. Exactly what i want.
My existing project has an app.js file with
var iMPULS = angular.module('iMPULS', []);
and the project works fine as well, but if i want to use ngDialog and change the module to:
var iMPULS = angular.module('iMPULS', ['ngDialog']);
the whole layout is kind of messed up, no link in my iMPULS.conf work anymore plus i got "Error: No module: ngDialog" concerning to angular.min.js in Firefox-Browserconsole.
How could this be? I just addes the 'ngDialog' to the module in app.js just like in the testfiles above.
I have the following Angular UI Modal:
<script type="text/ng-template" id="dialogBox">
<div class="modal-header">
<p class="modal-title"><b>{{title}}</b></p>
</div>
{{msg}}
<div class="modal-footer">
<button class="btn btn-primary b1" type="submit">OK</button>
</div>
</script>
What I want is to set msg with HTML markup, such as "This is a <b>text</b>". I tried, however the HTML is not rendered (the modal shows the markup). Is this achievable?
You have to use ngHtmlbind. It requires angular-sanitize.js (you have to add ngSanitize to your module dependencies). You also have to declare the html you want to render is safe using $sce.trustAsHtml. For example:
The javascript:
(function(){
'use strict';
angular
.module('myModule', ['ngSanitize']);
angular
.module('myModule')
.controller('showHtmlCtrl', showHtmlCtrl);
showHtmlCtrl.$inject = ['$sce'];
function showHtmlCtrl($sce){
var vm = this;
var html = "<p> Hello world! </p>";
vm.html = $sce.trustAsHtml(html);
}
})();
The view:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#~1.4.3" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script data-require="angular-sanitize#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myModule" ng-controller="showHtmlCtrl as shc">
<div ng-bind-html="shc.html"></div>
</body>
</html>
you can see it working this plunker
index.html: this is the html
<html ng-app="myapp">
<head>
<title>shruthi reddy</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--<script type="text/javascript">window.NRUM ||(NREUM={}),__nr_require=function(e,t...</script>-->
<script src="js/app.js"></script>
</head>
<body ng-controller="Controller">
<h1> ASHOK KUMAR PETLA</h1>
<P>VIJAYAWADA IS KING IS VANGAVEETI MOHAN RANGA. </P>
<button type="submit" ng-click="create()">swathi</button>
<button type="submit" ng-click="subject()">srisha</button>
<button type="submit" ng-click="delete()">ramya</button>
<button type="submit" ng-click="edit()">sunitha</button>
</body>
</html>
APP.JS: ui bootstrap in js file . u can send the correct answer or code. i have tried but not come the popup.
this is script of index.html
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$modal',function($scope,$modal){
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'views/prakash.html',
});
}
}]);
index.html and app.js .
pop up is not coming if the swathi is clicked.
Are you sure the templateUrl you have given that is correct or the html file is available?
Or make sure you have initialized all the required dependent modules like ui-bootstrap-tpls-0.12.1.js
I have created a plunkr for your code and that is working.
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$modal',function($scope,$modal){
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'mypage.html',
});
}
}]);
See the plunkr here-
http://plnkr.co/edit/GRgjv8fyquOQirXwWaWQ?p=preview
You need to include the -tpls.js file aswell, that file will make your own templates go into $templates.cache so you can use your own.
I can't see that you've installed the tpls file.
Also shouldn't it be $uibModal instead of $modal?like so
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$uibModal', function($scope, $uibModal) {
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'views/prakash.html',
});
}
}]);
I can't seem to get angular ui bootstraps collapse directive to work. I've set up a plunkr with a minimal example, but its still non functional. Anyone shed any light on this?
Plunkr
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.1.*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="CollapseController">
<button class="btn btn-default" ng-click="collapsed = !collapsed">Toggle</button>
<div collapse="collapsed">
<div>
<h1>Hello Plunker!</h1>
</div>
</div>
</body>
</html>
JS
angular.module('app', [])
.controller('CollapseController', function($scope){
$scope.collapsed = false;
});
You need to declare ui.bootstrap module dependency in order to use it:
angular.module('app', ['ui.bootstrap'])
You should declare a dependency in your app module on ui.bootstrap module:
angular.module('app', ['ui.bootstrap']);
Here's your updated working plnkr.
Im trying to make my first modal using Angularjs. I'm not sure or why I'm getting this error. I have error:
TypeError: Cannot read property 'open' of undefined
Here is my code:
Layout:
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<script src="~/Scripts/angular.js" type="text/javascript"></script>
<script src="~/Scripts/angular-resource.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="~/Scripts/angular-route.js" type="text/javascript"></script>
<script src="~/Scripts/ng-grid.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap.js" type="text/javascript"></script>
<script src="~/Scripts/app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="~/Content/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
</head>
<body ng-controller="CtrlController">
#RenderBody()
</body>
</html>
app.js:
(function() {
var app = angular.module("app", ["ngGrid", "ui.bootstrap"]);
app.controller("CtrlController", function ($scope, $http, $log, $modal) {
$scope.on = function ($modal) {
alert("dddd");
$modal.open(
{
templateUrl: 'http://localhost:58652/Home/TestView',
controller: "CtrlController"
}
);
}
});
})()
HTML for button:
<div ng-click="on()" class="gridStyle" ng-grid="gridOptions">
</div>
<button ng-click="on()" type=button class="btn">Добавить</button>
But when I click the button, I get the error Cannot read property 'open' of undefined. Why is that?
Remove $modal parameter from $scope.on function definition and it should work. You don't have to pass it with ngClick wince you already have $modal service in scope:
$scope.on = function() {
$modal.open({
templateUrl: 'http://localhost:58652/Home/TestView',
controller: "CtrlController"
});
};