Develop Reference

Can't access parent $scope in $mdBottomSheet

I can't access the parent ä$scope in my $mdBottomSheet. Iwant be able to create this bottom sheet and click one of the buttons inside of it displaying the parent $scope data. I made a codepen.
That's the code by the way:
<div ng-controller="BottomSheetExample" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
<div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center">
<md-button flex="50" class="md-primary md-raised" ng-click="showGridBottomSheet()">Show as Grid</md-button>
</div>
<div ng-if="alert">
<br>
<b layout="row" layout-align="center center" class="md-padding">
{{alert}}
</b>
</div>
<script type="text/ng-template" id="bottom-sheet-grid-template.html"><md-bottom-sheet class="md-grid" layout="column" ng-cloak>
<div>
<md-list flex layout="row" layout-align="center center">
<md-list-item ng-repeat="item in items">
<div>
<md-button class="md-grid-item-content" ng-click="listItemClick($index)">
<md-icon md-svg-src="{{item.icon}}"></md-icon>
<div class="md-grid-text"> {{ item.name }} </div>
</md-button>
</div>
</md-list-item>
</md-list>
</div>
</md-bottom-sheet>
</script>
</div>
JavaScript:
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.config(function($mdIconProvider) {
$mdIconProvider
.icon('share-arrow', 'img/icons/share-arrow.svg', 24)
.icon('upload', 'img/icons/upload.svg', 24)
.icon('copy', 'img/icons/copy.svg', 24)
.icon('print', 'img/icons/print.svg', 24)
.icon('hangout', 'img/icons/hangout.svg', 24)
.icon('mail', 'img/icons/mail.svg', 24)
.icon('message', 'img/icons/message.svg', 24)
.icon('copy2', 'img/icons/copy2.svg', 24)
.icon('facebook', 'img/icons/facebook.svg', 24)
.icon('twitter', 'img/icons/twitter.svg', 24);
})
.controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet, $mdToast) {
$scope.alert = '';
$scope.items = [
{ name: 'Hangout', icon: 'hangout' },
{ name: 'Mail', icon: 'mail' },
{ name: 'Message', icon: 'message' },
{ name: 'Copy', icon: 'copy2' },
{ name: 'Facebook', icon: 'facebook' },
{ name: 'Twitter', icon: 'twitter' },
];
$scope.listItemClick = function($index) {
var clickedItem = $scope.items[$index];
$mdBottomSheet.hide(clickedItem);
};
$scope.showGridBottomSheet = function() {
$scope.alert = '';
$mdBottomSheet.show({
templateUrl: 'bottom-sheet-grid-template.html',
controller: function () {
return this;
},
preserveScope: true,
bindToController: true,
clickOutsideToClose: true
}).then(function(clickedItem) {
$mdToast.show(
$mdToast.simple()
.textContent(clickedItem['name'] + ' clicked!')
.position('top right')
.hideDelay(1500)
);
});
};
})
.run(function($http, $templateCache) {
var urls = [
'img/icons/share-arrow.svg',
'img/icons/upload.svg',
'img/icons/copy.svg',
'img/icons/print.svg',
'img/icons/hangout.svg',
'img/icons/mail.svg',
'img/icons/message.svg',
'img/icons/copy2.svg',
'img/icons/facebook.svg',
'img/icons/twitter.svg'
];
angular.forEach(urls, function(url) {
$http.get(url, {cache: $templateCache});
});
});
I can't see the buttons/icons inside the sheet.
Fiddle: https://jsfiddle.net/uvkr9zwe/

You need to parse your parent controller scope in the right way by instancing and referencing the parent controller scope.
Check this demo fiddle:
Your scope Action:
.controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet, $mdToast) {
$scope.alert = '';
$scope.items = [
{ name: 'Hangout', icon: 'hangout' },
{ name: 'Mail', icon: 'mail' },
{ name: 'Message', icon: 'message' },
{ name: 'Copy', icon: 'copy2' },
{ name: 'Facebook', icon: 'facebook' },
{ name: 'Twitter', icon: 'twitter' },
];
$scope.showGridBottomSheet = function() {
$mdBottomSheet.show({
templateUrl: 'bottom-sheet-grid-template',
controller: function () {
this.parent = $scope;
},
controllerAs: 'ctrl',
clickOutsideToClose: true
}).then(function(clickedItem) {
$mdToast.show(
$mdToast.simple()
.textContent(clickedItem['name'] + ' clicked!')
.position('top right')
.hideDelay(1500)
);
});
};
})
View Template:
<script type="text/ng-template" id="bottom-sheet-grid-template">
<md-bottom-sheet class="md-grid" layout="column" ng-cloak>
<div>
<md-list flex layout="row" layout-align="center center">
<md-list-item ng-repeat="item in ctrl.parent.items">
<div>
<md-button class="md-grid-item-content" ng-click="listItemClick($index)">
<md-icon md-svg-src="{{item.icon}}"></md-icon>
<div class="md-grid-text"> {{ item.name }} </div>
</md-button>
</div>
</md-list-item>
</md-list>
</div>
</md-bottom-sheet>
</script>

AngularJS: ng-click not working in ui-grid cellTemplate

Here I go again, with angular problems.
I have a grid in my HTML, which is just a line.
I'm copypasteing the controller.
app.controller('PanelController', function ($scope, $compile, uiGridConstants){
var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="dettaglio(row.entity)" /></div>';
$scope.dettaglio = function(ritornoSearch, inspect) {
console.log("make it function");
};
columnDefs: [
{ field: 'azioni', enableFiltering: false, width: 85, enableSorting: false, enableColumnMenu: false, cellTemplate: actionTemplate, displayName: 'Azioni'},
{ field: 'codeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'nomeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'cognSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'codeFiscaleSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'descStato' , headerCellClass: $scope.highlightFilteredHeader }
]
};
The question is: when I open it in my browser, the image doens't show up as clickable. If I try to click on it anyway, it doens't even provide me the console.log.
What am I missing?

Just do it like its documented in http://ui-grid.info/docs/#/tutorial/305_appScope and compare this runnable plnkr demo with your solution.
$scope.grid.appScope is available in all templates that the grid uses.
In a template, you access the scope using grid.appScope property
In that way you need to change your template into the right syntax:
ng-click="grid.appScope.dettaglio(row)":
var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="grid.appScope.dettaglio(row)" /></div>';
AngularJS application example with ui-grid:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$log', '$http', function ($scope, $log, $http) {
$scope.dettaglio = function (row) {
console.log(row);
alert('inside');
};
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{name: 'name'},
{name: 'gender'}, {
name: 'ShowScope',
cellTemplate: '<button class="btn primary" ng-click="grid.appScope.dettaglio(row)">Click Me</button>'
}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json').success(function (data) {
$scope.gridOptions.data = data;
});
}]);

Iframe content is not refreshing correctly in AngularJS directive

I'm using a directive to set html, css and javascript code inside of and iframe. These iframes are inside a ng-repeat, so there is an iframe per result.
Then these results are filtered by title and sortby title or date.
So, I have two problems:
Firefox is not showing the iframe html code but the rest of the browsers are.
After selecting a sort option, the title and date are refresing correctly, but the iframe content is not.
Here is a link to Plunker: http://plnkr.co/edit/Kvsbir?p=info
And here is my code:
<body ng-controller="HomeController">
<div class="panel-heading text-center">
<h3>Projects</h3>
<form action="" class="form-inline">
<div class="form-group">
<input class="form-control" type="text" ng-model="query.name" placeholder="Search...">
</div>
<div class="form-group dropdown">
<select class="btn btn-default dropdown-toggle" type="text" ng-model="sortOrder" ng-options="item.value as item.text for item in sortOptions"></select>
</div>
</form>
</div>
<div class="panel-body">
<div ng-model="result" ng-repeat="project in projects | orderBy:sortOrder | filter:query.name" class="col-md-4 col-sm-6">
<div class="single-pen">
<div class="meta">
<h3>{{project.title}}</h3>
<h6> {{project.created_at | date}} </h6>
</div>
<div class="iframe-wrap">
<div theframe="project"></div>
</div>
</div>
</div>
</div>
</body>
The controller
var app = angular.module('plunker', []);
app.controller('HomeController', function ($rootScope,$filter, $scope) {
'use strict';
var vm = this;
// Filter & sort
$scope.sortOptions = [
{ value: "-created_at", text: "Ordenar by Date"},
{ value: "title", text: "Ordenar by Title"}
];
$scope.sortOrder = $scope.sortOptions[0].value;
$scope.result = [
{
title: 'Project 1',
code: [{
css: "body{background-color: pink;}",
html: "<h1>Hello</h1>",
js: ""
}],
created_at: "2016-02-06T22:52:24.900Z"
},
{
title: 'Project 2',
code: [{
css: "body{background-color: blue;}",
html: "<h1>Hello</h1>",
js: ""
}],
created_at: "2016-02-10T11:52:33.055Z"
},
{
title: 'Project 3',
code: [{
css: "body{background-color: yellow;}",
html: "<h1>Hello</h1>",
js: ""
}],
created_at: "2016-02-06T22:52:24.900Z"
},
{
title: 'Project 4',
code: [{
css: "body{background-color: orange;}",
html: "<h1>Hello</h1>",
js: ""
}],
created_at: "2016-02-08T11:52:33.055Z"
},
{
title: 'Project 5',
code: [{
css: "body{background-color: red;}",
html: "<h1>Hello</h1>",
js: ""
}],
created_at: "2016-02-01T13:46:33.917Z"
},
];
$scope.projects = $scope.result;
})
.directive('theframe', function($compile){
return {
restrict: 'A',
scope: {
theframe: '='
},
template: '<iframe id="frame" scrolling="no"></iframe>',
link: function($scope, element, attrs) {
var $head = $(element).find('#frame').contents().find('head');
var $body = $(element).find('#frame').contents().find('body');
$scope.$watch('projects', function(n,o){
$head[0].innerHTML = '<style>'+$scope.theframe.code[0].css+'</style>';
$body[0].innerHTML = $scope.theframe.code[0].html + '<script> (function(){ \n' + $scope.theframe.code[0].js + '\n})();</script>';
}, true);
}
}
})
Any hints of why is not working correctly?
EDIT
SOLVED Firefox issue!
Thanks for the $timeout idea.
This is what i've changed: http://plnkr.co/edit/Kvsbir?p=preview
.directive('theframe', function($compile, $timeout){
return {
restrict: 'A',
scope: {
theframe: '='
},
template: '<iframe id="frame" scrolling="no"></iframe>',
link: function($scope, element, attrs) {
var $head = $(element).find('#frame').contents().find('head');
var $body = $(element).find('#frame').contents().find('body');
var timeout = setInterval(function(){
$head[0].innerHTML = '<style>'+$scope.theframe.code[0].css+'</style>';
$body[0].innerHTML = $scope.theframe.code[0].html + '<script> (function(){ \n' + $scope.theframe.code[0].js + '\n})();</script>';
$scope.$apply();
}, 500);
}
}
})

Conditional filtering list displayed in angularjs

I'm facing an issue when trying to filter a list displayed with ng-repeat conditionally : if the search term start by # : filter only by books / else : filter only by username.
Here is a codepen of my exact issue :
http://codepen.io/prettyGoodPancakes/pen/raoWeB
my list is as follow :
$scope.users = [
{
username: 'clem',
books: [
{ value: 'kafka' },
{ value: 'maupassant' }
]
},
{
username: 'sam',
books: [
{ value: 'Balzac' },
{ value: 'Zola' },
{ value: 'Kafka' }
]
}
];
Here's a snippet of the same code for running on this site:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.users = [{
username: 'clem',
books: [{
value: 'kafka'
}, {
value: 'maupassant'
}]
}, {
username: 'sam',
books: [{
value: 'Balzac'
}, {
value: 'Zola'
}, {
value: 'Kafka'
}]
}];
$scope.$watch(function() {
return $scope.search;
}, function() {
if (scope.search.length > 0) {
if ($rootScope.search[0] === '#') {
// Filter ONLY by books
} else {
// Filter ONLY by username
}
}
}, true);
});
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<button class="button button-clear">
Cancel
</button>
</ion-header-bar>
<ion-content>
<!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
<ion-list>
<ion-item ng-repeat="user in users | filter:search" item="item">
{{user.username}}
<p><span ng-repeat="game in user.books" style="margin-right:5px">{{game.value}}</span>
</p>
</ion-item>
</ion-list>
</ion-content>
</body>
</html>

Create a custom filter:
.filter('PrettyGoodPancakeFilter', function () {
return function(items, filterBy) {
if (filterBy.indexOf('#') === 0) {
return items.filter(function (item) {
return item.username.indexOf(filterBy) > -1;
});
} else {
// filter by books
}
}
});

angularjs , ui-grid : Display information in a basic grid not working

I am a newbie in angularjs and ui-grid.
I am trying to display a basic grid with employee information- id, name, salary, designation, grade.
This is the output of running index.html :
**app.js : **
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ field: 'eid' },
{ field: 'ename' },
{ field: 'salary' },
{ field: 'designation' },
{ field: 'grade', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
scope.gridOptions2 = {
enableSorting: true,
onRegisterApi: function( gridApi ) {
$scope.grid2Api = gridApi;
},
columnDefs: [
{
field: 'eid',
sort: {
direction: uiGridConstants.DESC,
priority: 1
}
},
{
field: 'ename',
sort: {
direction: uiGridConstants.DESC,
priority: 0
}
},
{
field: 'salary',
sort: {
direction: uiGridConstants.DESC,
priority: 2
}
},
{ field: 'designation', enableSorting: false },
{
field: 'grade',
sort: {
direction: uiGridConstants.DESC,
priority: 3
}
}
]
};
$http.defaults.headers.common['Accept'] = "application/json";
$http.defaults.headers.common['Authorization'] = "Basic dG9tY2F0OnRvbWNhdA==";
$http.get('http://localhost:8080/EmployeeManagementSystemAngJS-0.0.1-SNAPSHOT/viewEmployeesPath')
.success(function(response) {
$scope.gridOptions1.data = response;
$scope.gridOptions2.data = response;
});
}]);
**main.css : **
.grid {
width: 500px;
height: 200px;
}
**index.html : **
<!doctype html>
<html ng-app="app">
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="ui-grid-stable.js"></script>
<link href="ui-grid-stable.css"></link>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<br> <br>
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
<br>
<br>
<div id="grid2" ui-grid="gridOptions2" class="grid"></div>
</div>
</body>
</html>
Could any one point out where i am going wrong?
I could not find many references to ui-grid. A few links to good content will be very helpful.
I referred to this and this. Both result in the same output.
I have added ui-grid-stable.css and ui-grid-stable.js in the project folder itself.

i meet the same problem
when i change the format of css to
<link rel="stylesheet" href="/resources/js/lib/ui-grid/ui-grid.min.css"/>
then it's fixed

Try with this url, it worked for me :)
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">