As per my question, i am able to insert one directive into another directive successfully. But now, when i am using the same way to put the directive in the tabs as follows, I am unable to compile the directive properly and it is showing me UNKNOWN CHARACTERS like :: {"0":{"ng339":6},"length":1}
Please note that:
1) I used the example from the Angular UI BootStrap Tabs
var myapp = angular.module('myapp', ['ngAnimate', 'ui.bootstrap']);
angular.module('myapp')
.controller('myCtrl',['$scope','$compile', function ($scope, $compile) {
$scope.tabs = [
{ title:'Dynamic Title 1', content:'<first-directive></first-directive>' },
{ title:'Dynamic Title 2', content:'Dynamic content 2' }
];
var compileTabs = function() {
var ele = $compile($scope.tabs[0].content)($scope);
$scope.tabs[0].content = ele;
};
compileTabs();
$scope.model = {
name: 'Tabs'
};
}]);
angular.module('myapp').directive("firstDirective",['$compile', function($compile) {
return {
templateUrl : './directives/firstdirective.html',
scope: {
},
controller: function ($scope) {
$scope.firstCtrl = function()
{
console.log('I am in the firstCtrl');
}
}}]);
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="container">
<div ng-controller="myCtrl">
<uib-tabset>
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
{{tab.content}}
</uib-tab>
</uib-tabset>
</div>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</body>
</html>
I think you just forgot definitions of the services.
Your code
.controller('myCtrl',['$compile', function ($scope, $window, $compile) {
$window and $compile will be undefined.
Right code
.controller('myCtrl',['$scope', '$window', '$compile', function ($scope, $window, $compile) {
Related
I'm really struggling with this issue and I don't know what the matter is...
I'm going to leave out a lot of code, but this is essentially the jist of it... Based off the Angular material design guidelines this should work. I can't figure out for the life of me why it doesn't.
When I run the code I simply get an error:
TypeError: Cannot read property 'show' of undefined
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Main">
<!-- some stuff here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.css">
</head>
<body ng-controller="MainCtrl as ctrl">
<div ng-click="executeToast()">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.js"></script>
</body>
</html>
controller:
angular.module('MainController', [
'MainService',
'MainDirective',
'ngMaterial',
'ngMessages',
'ngSanitize'
])
.controller('MainCtrl', [ '$scope', '$sce', '$mdToast', function($scope, Main, $sce, $apply, $rootScope, $mdToast) {
$scope.executeToast() = function() {
$mdToast.show($mdToast.simple({
hideDelay: 3000,
position: 'top left',
content: 'testing',
toastClass: 'success'
}));
}
}]);
Any thoughts or possible solutions? Thanks!
A couple of mistakes you made here :
1, In dependency injection sequence must be same, check more here
2, No need to pass $apply as a dependency,
Try this
.controller('MainCtrl', [ '$scope', '$rootScope', '$mdToast','$sce', function($scope, $rootScope, $mdToast, $sce) {
$scope.executeToast() = function() {
$mdToast.show($mdToast.simple({
hideDelay: 3000,
position: 'top left',
content: 'testing',
toastClass: 'success'
}));
I have a question about how to pass scope to a template rendered from a directive. This seems like it should be so straight forward but somehow I am having a lot of trouble getting it to work.
My HTML (simplified for brevity) is as follows:
<div ng-app="myApp">
<md-content>
<!-- strangely TestController as tc doesnt work -->
<div ng-controller="TestController">
<div ng-click="showDialog();">Show</div> <!-- this also doesnt seem to work.. -->
</div>
</md-content>
</div>
And then the application (contained in a script tag on index.html):
// app -- using components
var app = angular.module('ctrlApp',
['components', 'ngMaterial']);
// removed app.config from ngMaterial for brevity
The app contains a controller that has a function to show a mdDialog:
//controller
app.controller('TestController', function($scope, $log, $mdDialog) {
$scope.items = [{'title': 1},{'title': 2}];
// open modal
$scope.showDialog = function() {
$mdDialog.show({
templateUrl: 'dialog.html',
parent: angular.element(document.body),
clickOutsideToClose:true,
controller: function() {
// scope from parent persists here as expected
console.dir($scope.items);
// used to wire up dialog specific UI behavior
$scope.cancel = function() { $mdDialog.hide(); }
}
});
};
});
Dialog.html just renders out the directive in a modal:
<md-dialog aria-label="test">
<form ng-cloak>
<!-- rendering a directive here -->
<my-directive></my-directive>
</form>
</md-dialog>
And finally, returning back to the app, here is the directive:
// link up a directive that is rendered in the model form
var d = angular.module('components', []);
d.directive('myDirective', function() {
function link(scope, element, attributes ) {
console.log("scope.items are ", scope.items); }
return({
restrict: "E",
controller: 'TestController',
link: link,
templateUrl: 'directive.html',
});
});
And finally the directive.html template:
<div>
<h1>my Directive template</h1>
<pre> Empty!: {scope.items}</pre>
</div>
I am confused as to how I can get the scope that is created by the TestController into the template that is rendered by the directive. It works fine all the way up to the 'link' function but not in the directive's template...
Any advice would be much appreciated!
Thanks
- X
You have done mistake in directive.html,
Your code:
<div>
<h1>my Directive template</h1>
<pre> Empty!: {scope.items}</pre>
</div>
Expected code:
<div>
<h1>my Directive template</h1>
<pre> Empty!: {{scope.items[0]}}</pre> //Here you need to pass Array index
</div>
Here i given you running code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" media="screen" title="no title" charset="utf-8">
<script src="bower_components/angular/angular.min.js" charset="utf-8"></script>
<script src="bower_components/angular-animate/angular-animate.min.js" charset="utf-8"></script>
<script src="bower_components/angular-aria/angular-aria.min.js" charset="utf-8"></script>
<script src="bower_components/angular-messages/angular-messages.min.js" charset="utf-8"></script>
<script src="bower_components/angular-material/angular-material.js" charset="utf-8"></script>
</head>
<body>
<div ng-app="ctrlApp">
<md-content>
<!-- strangely TestController as tc doesnt work -->
<div ng-controller="TestController">
<div ng-click="showDialog();">Show</div>
<!-- this also doesnt seem to work.. -->
</div>
</md-content>
</div>
<script type="text/javascript">
/** Own Module **/
var d = angular.module('components', []);
d.directive('myDirective', function() {
function link(scope, element, attributes) {
console.log("scope.items are ", scope.items);
}
return ({
restrict: "E",
controller: 'TestController',
link: link,
template: '<div>\
<h1>my Directive template</h1>\
<pre> Empty!: {{items[0]}}</pre>\
</div>',
});
});
var app = angular.module('ctrlApp', ['components', 'ngMaterial']);
app.controller('TestController', function($scope, $log, $mdDialog) {
$scope.items = [{
'title': 1
}, {
'title': 2
}];
// open modal
$scope.showDialog = function() {
$mdDialog.show({
template: '<md-dialog aria-label="test">\
<form ng-cloak>\
<my-directive></my-directive> </form>\
</md-dialog>',
parent: angular.element(document.body),
clickOutsideToClose: true,
controller: function() {
// scope from parent persists here as expected
console.dir($scope.items);
// used to wire up dialog specific UI behavior
$scope.cancel = function() {
$mdDialog.hide();
}
}
});
};
});
</script>
</body>
</html>
If you want to pass the scope to template try something like this
In Dialog.html
In Directive just add the following line
return({
restrict: "E",
controller: 'TestController',
scope:{
item:'='
},
link: link,
templateUrl: 'directive.html',
});
Hope this helps.
If you want to pass scope to $mdDialog look at the link below.
https://github.com/angular/material/issues/1531
I'm trying to inject my factory into a controller. If I list the factory as one of the controller's parameters, I get this error:
Error: [$injector:unpr] Unknown provider: wordRushFacProvider <- wordRushFac <- wordrushCtrl
http://errors.angularjs.org/1.6.1/$injector/unpr?p0=wordRushFacProvider%20%3C-%20wordRushFac%20%3C-%20wordrushCtrl
Here is the code for my factory:
(function() {
"use strict";
angular
.module("wordrush")
.factory("wordRushFac", function($http) {
function getValidWords() {
return $http.get('../data/valid-words.txt');
}
return {
getValidWords : getValidWords
}
})
})
And the code for my controller:
(function() {
'use strict'
angular
.module('wordrush')
.controller('wordrushCtrl', function($scope, $http, wordRushFac) {
wordRushFac.getValidWords().then(function(words) {
$scope.words = words.data;
});
$scope.words = 'Hello'
});
})();
And for my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Word Rush</title>
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="components/wordrush.ctr.js"></script>
<script src="components/wordrush.fac.js"></script>
</head>
<body ng-app="wordrush" ng-controller="wordrushCtrl">
<h1> {{ words }} </h1>
</body>
</html>
And for my app.js:
angular
.module('wordrush', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('green');
})
I made a program with code identical to this except the names and variables were changed, and it worked fine. So what am I doing wrong here?
Here is a plunkr that says "Hello": https://plnkr.co/edit/MyxcXQ8YI4QYqeFsyVJz?p=preview
You have an extra set of open / close parenthesis in your controller definition, remove those:
angular
.module('wordrush')
.controller('wordrushCtrl', function($scope, $http, wordRushFac) {
wordRushFac.getValidWords().then(function(words) {
$scope.words = words.data;
});
$scope.words = 'Hello'
});
Also, are you sure you are including the ng-material JS file? I didn't see that listed in your HTML.
You're not injecting in the controller, should be:
.controller('wordrushCtrl', ['$scope', '$http', 'wordRushFac', function($scope, $http, wordRushFac) {
// Rest of controller code;
}]);
Switch your scripts. Factory script should be first then controller
Ther order should be,
<script src="scripts/app.js"></script>
<script src="components/wordrush.fac.js"></script>
<script src="components/wordrush.ctr.js"></script>
DEMO
I made the following changes and it worked fine.
(function() {
"use strict";
angular
.module("wordrush")
.factory("wordRushFac", function($http) {
function getValidWords() {
return $http.get('../data/valid-words.txt');
};
return {
getValidWords : getValidWords
};
});
}());
I've just started learning Angular JS but soon I got a problem which I don't know how to resolve.
This code prints:
<h1>{{author[0].name}}</h1>
<p>{{author[0].title+ ', '+author[0].company}}
instead of:
<h1>MKJ</h1>
<p>Web Developer, Student Organization</p>
The code is given here as well:
<!doctype html>
<!-- Declaring the ng-app -->
<html ng-app="myApp">
<head>
<title>Parking</title>
<!-- Importing the angular.js script -->
<script src="lib/angular/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", function ($scope){
$scope.author = {
'author': 'MKJ',
'title': 'Web Developer',
'company': 'Student Organization',
};
}
</script>
</head>
<!-- Attaching the view to the MyController -->
<body ng-controller="MyController">
<h1>{{author[0].name}}</h1>
<p>{{author[0].title+ ', '+author[0].company}}
See this snippet or correct the code on JS fiddle?
var myApp = angular.module("myApp", []);
myApp.controller("MyController", function ($scope){
$scope.author = {
'author': 'Ravy VIllalbobs',
'title': 'Staff Author',
'company': 'Lynda.com',
};
}
<div ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{author.title+ ', '+author.company}}
</div>
$scope.author is an Object so you don't need to specify index in brackets here
<h1>{{author.name}}</h1>
<p>{{author.title+ ', '+author.company}}
updated fiddle
I'm using bootstrap to display a modal and want it to be shown on click of a anchor tag as a route.
But i'm getting a module error & can't seem to figure out how to resolve it.
HTML
<div ng-view>
<div ng-controller="DetailPageCtrl">
Click here to open modal!
</div>
<script type="text/ng-template" id="modalContainer">
<div ng-controller="ProfileModalCtrl"></div>
</script>
</div>
JS
var app = angular.module('plunker', ['ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl : 'modalContainer',
controller : 'ProfileModalCtrl'
});
})
app.controller('DetailPageCtrl', function($scope) {
console.log("detail page");
});
app.controller('ProfileModalCtrl', function($scope, $modal) {
$modal.open({templateUrl : 'modal.html'});
});
Code in plnkr :
http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview
Demo is plagued with problems. You haven't included angular-route.js. You didn't provide a default path using otherwise and you placed html within ng-view
/* include script tag with `angular-route.js , then inject as dependency*/
var app = angular.module('plunker', ['ui.bootstrap', 'ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'default'
})
.when('/profile', {
templateUrl: 'modalContainer',
controller: 'ProfileModalCtrl'
}).otherwise({
redirectTo: '/'
})
});
<div ng-view><!-- leave empty --></div>
DEMO
You will also run into problems declaring same ng-controller in markup as in route config...pick one or the other
Your plunker is missing the ngRoute dependency. In newer versions of angular, ngRoute is a separate library that needs to included separately and declared as a module dependency to your app module:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="http://code.angularjs.org/1.2.4/angular-route.js"></script>
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
Also, your routes are not fully defined.
Also, your templates (<script type="text/ng-template">) are defined inside the <div ng-view> element. ng-view is a directive which will replace the content of host div element when route is resolved, so a better place for your templates is outside of ng-view element.
Fixed PLUNKER
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl : 'modalContainer',
controller : 'ProfileModalCtrl'
})
.when('/detail', {
templateUrl : 'detail.html',
controller : 'DetailPageCtrl'
})
.otherwise({redirectTo: '/detail'});
});
app.controller('DetailPageCtrl', function($scope) {
console.log("detail page");
});
app.controller('ProfileModalCtrl', function($scope, $modal) {
$modal.open({templateUrl : 'modal.html'});
});
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="http://code.angularjs.org/1.2.4/angular-route.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DetailPageCtrl">
Click here to open modal!
</div>
<script type="text/ng-template" id="modalContainer">
<div ng-controller="ProfileModalCtrl"></div>
</script>
<div ng-view></div>
</body>
<script src="script.js"></script>
</html>