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"
});
};
Related
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">
I'm having some problems when I tried to open a calendar using jquery ui thru NgRoute Angularjs. I've tried removing ng-view tag and it works fine. i need it working with NgRoute.
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
<title>AngularJS Routing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<li> Date Picker </li>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.jsp
(function() {
"use strict";
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/datePicker', {
templateUrl: 'DatePicker.html',
controller: 'DemoCtrl'
})
.otherwise({
redirectTo: '/index'
});
});
mainApp.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
//$('#datepicker1').datepicker();
}]);
})();
DatePicker.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
</head>
<body>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
</body>
</html>
http://plnkr.co/edit/Wk4zZo0WfoypMmaMgv4j
I will appreciate any help on this issue.
Thank you so much,
Ariel.
in DatePicker.html you dont need all tags again only the ones that will go inside ng-view:
<script>
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
<form>
<p>Fecha: <input id="datepicker1" type="text" ></p>
Main menu
</form>
And this will go inside index.html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="main.js"></script>
I dont know if it will sove your problem, but it is the correct thing to do...
I have just started learning Angular and trying to print some text through angular custom directive. but nothing is getting print. Please help me out. Here is the index.html and script.js file.
angular.module('main', [])
.controller('mainCtrl', function ($scope) {
$scope.name = "firoz";
})
.directive('myDir', function () {
return {
restrict : 'E',
template: '<div>Trying to print this text</div>'
};
});
<!DOCTYPE html>
<html ng-app="main">
<head>
<script data-require="angular.js#1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<mydir></mydir>
</body>
</html>
Here is the Plunker link : http://plnkr.co/edit/ub9Ch34OtckzQuCI9sDk?p=preview
You need to hyphenate anywhere that has a capital when used in the directive, like:
<my-dir></my-dir>
The correct Angular syntax is:
<my-dir></my-dir>
angular.module('main', [])
.controller('mainCtrl', function ($scope) {
$scope.name = "firoz";
})
.directive('myDir', function () {
return {
restrict : 'E',
template: '<div>Trying to print this text</div>'
};
});
<!DOCTYPE html>
<html ng-app="main">
<head>
<script data-require="angular.js#1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<my-dir></my-dir>
</body>
</html>
Why is that when I run my Angular app, I don't get directive running?
Example code:
var app = angular.module("app",['mgcrea.ngStrap','layout.menu']);
app.controller('MainController', ['$scope','$timeout', function($scope,$timeout){
$timeout(function(){console.log("ready")});
}]);
var menu = angular.module('layout.menu', [])
.controller('MenuController', ['$scope', function($scope){
console.log("controller");
}])
.directive('menuDir', ['$window', function($window){
console.log("directive");
return function (scope, element) {
console.log("return directive");
};
}]);
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="assets/libs/bootstrap/dist/css/bootstrap.min.css">
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="assets/libs/angular/angular.js"></script>
<script type="text/javascript" src="assets/libs/angular-strap/dist/angular-strap.js"></script>
<script src="assets/libs/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MainController">
<div class="list-group mainmenu" id="mainmenu" ng-controller="MenuController"></div>
</body>
</html>
When I run the app, I get the controller output, but no output from directive. Why? How can I fix it?
Directives/Services/Factories in angularJs are lazily instantiated.
They will be processed only when we use them.
Use the menuDir directive in your markup, then you will see the console statement written inside your directive.
I am trying to learn AngularJS. I have a navigation setup as a view and I cannot get it to display. When I look in the inspector i see <!-- ngInclude: views/nav.html -->.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>The ToDo List</title>
<script type="text/javascript" src="assets/js/lib/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script type="text/javascript" src="assets/js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="assets/js/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/controllers/activetaskscontoller.js"></script>
</head>
<body>
<div class="navigation" ng-include="views/nav.html"></div>
Here is my app.js
var myApp = angular.module('myApp',
['ngRoute', 'firebase', 'appControllers']);
var appControllers = angular.module('appControllers', ['firebase']);
myApp.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/active-tasks', {
templareUrl: 'views/active-tasks.html',
controller: 'ActiveTasksController',
}).
when('/completed-tasks', {
templareUrl: 'views/completed-tasks.html',
controller: 'CompletedTasksController',
}).
otherwise({
redirectTo: '/active-tasks'
});
}]);
ng-include is expecting a string and not a path.
Try changing to this:
<div class="navigation" ng-include="'views/nav.html'"></div>
You can read more about the subject here: AngularJS ng-include does not include view unless passed in $scope