My html and javascript are as follows, I have the following element
<i class="material-icons" ng-click="clicked()" md-48>add_circle</i>
Which works when clicked i.e. by bringing up a dialog, however the following on the same page does not work.
html
<body ng-cloak>
<div ng-cloak ng-controller="mainController" >
<div layout="row" layout-align="end end">
<md-button aria-label="Eat cake" ng-click="clicked()"></md-button>
</div>
</div>
</body>
angular
angular.module('notifyMe', ['ngMaterial', 'material.svgAssetsCache'])
.controller('mainController', function($scope, $mdDialog) {
$scope.clicked = function () {
alert('Worked!');
};
})
No, your code should work. Make sure you loaded the dependencies as below:
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.clicked = function () {
alert('Worked!');
};
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
<!-- Use dev version of Angular Material -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<div layout="column" layout-fill flex style="max-height:100%">
<md-toolbar>
<md-button ng-click=clicked()>Click here</md-button>
</md-toolbar>
</div>
</body>
</html>
Related
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
I was just following a tutorial in which a factory makes a $http.get() request and returns data which is affected to a controller's $scope variable ($scope.classifieds which is supposed to be shown in an ng-repeat loop) and the view doesn't get updated when the variable gets changed (logging the variable shows the data is successfully returned)
The view code is :
<!DOCTYPE html>
<html>
<head>
<title>Hello World!!!</title>
<link rel="stylesheet" type="text/css" href="node_modules/angular-material/angular-material.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/mdi/css/materialdesignicons.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body ng-app="ngClassifieds" ng-controller="classifiedsCtrl">
<hello-world></hello-world>
<md-toolbar>
<div class="md-toolbar-tools">
<p><strong>ngClassifieds</strong></p>
<md-button>
<md-icon class="mdi mdi-plus-circle"></md-icon>
New Classifieds
</md-button>
</div>
</md-toolbar>
<md-content class="md-padding" layout="row" layout-wrap>
<md-card ng-repeat="class in classifieds" flex="30">
<img ng-src="{{ class.img }}"></img>
<md-card-content>
<div class="classified-info" ng-show="!showContact">
<h2 class="md-title">{{ class.title}}</h2>
<h3>{{ class.price | currency }}</h3>
<h4>{{ class.pdate | date : "MMMM d, y"}}</h4>
<p>{{ class.desc }}</p>
</div>
<div class="classified-contact" ng-show="showContact">
<p><md-icon class="mdi mdi-account"></md-icon> {{class.contact.name}}</p>
<p><md-icon class="mdi mdi-phone"> </md-icon> {{class.contact.phone}}</p>
<p><md-icon class="mdi mdi-email"> </md-icon> {{class.contact.email}}</p>
</div>
<div layout="row">
<md-button ng-click="showContact = true">Contact</md-button>
<md-button ng-click="showContact = false">Details</md-button>
</div>
</md-card-content>
<md-card>
<md-content>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="node_modules/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="node_modules/angular-material/angular-material.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="components/classifieds.ctrl.js"></script>
<script type="text/javascript" src="components/classifieds.fac.js"></script>
</body>
</html>
the controller :
(function(){
"use strict";
angular.module("ngClassifieds")
.controller("classifiedsCtrl", ["$scope", "$http", "classifiedsFactory", function($scope, $http, classifiedsFactory){
$scope.message = "'with this dynamic text'";
$scope.classifieds = classifiedsFactory.getClassifieds().then(function(classified){
return classified.data;
});
console.log('----->>> $scope.classifieds : ' + JSON.stringify($scope.classifieds));
}] );
})();
and the factory :
(function(){
"use strict";
angular.module("ngClassifieds").factory("classifiedsFactory", function($http){
function getClassifieds() {
return $http.get('data/classifieds.json');
}
return {
getClassifieds : getClassifieds
}
});
})();
I have seen many alike questions but didn't find an answer to this problem.
$http.get() is an asynchronous, you should assign the value in success callback method.
Use
classifiedsFactory.getClassifieds().then(function(classified){
$scope.classifieds = classified.data;
});
Instead of
$scope.classifieds = classifiedsFactory.getClassifieds().then(function(classified){
return classified.data;
});
Below is the implementation of tabs using Angular UI-bootstrap . I would like to include some feature to close the opened tabs. Is there a way we can do it.
https://angular-ui.github.io/bootstrap/#/tabs
You could put it in a collapse?
How would you like your site to react, exactly? Otherwise you would have to write your own directive.
Here's an example:
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CollapseDemoCtrl">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">**your tabs inside of this**</div>
</div>
</div>
</body>
</html>
example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
I'm trying to create an autocomplete feature but I can't display the results as I want, I think it's a z-index issue, but I couldn't solve it.
I can use md-autocomplete, it doesn't have this problem, but I want to learn what's causing this.
As soon as I start typing, my input goes up and results are displayed below in the navigation bar.
I changed $http to an array to mock the results.
Here's my code:
<html lang="en">
<head>
<style>
#testing > div > div > div > md-input-container {
margin:0;
}
</style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<md-content>
<md-toolbar id="testing">
<div layout-wrap layout="row">
<div ng-controller="SearchCtrl" class="md-toolbar-tools">
<div flex="40" layout-align="center">
<md-input-container class="" flex="" layout="row">
<label class="search-color">Search</label>
<input ng-model="searchInput" class="text1" type="text">
</md-input-container>
<md-item-template flex="100" layout="column">
<div ng-repeat="a in details">
<div>{{a}}</div>
</div>
</md-item-template>
</div>
</div>
</div>
</md-toolbar>
</md-content>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
angular.module('BlankApp').controller('SearchCtrl', ["$scope", "$http",
function($scope, $http) {
//$scope.searchInput = "";
$scope.$watch('searchInput', function() {
if ($scope.searchInput) {
fetch();
}
});
function fetch() {
var arr = ["result1", "result2", "result3", "result4"];
$scope.details = arr;
}
}]);
</script>
</body>
</html>
Here's my plunk : http://plnkr.co/edit/LQ1HxV6vmPkUGYHnVfCg?p=preview
I can't see the star rating input anywhere. Isn't it loaded? Am I using the directive wrong? Please help.
I have included the ui.bootstrao, JQuery, Bootstrapm and thought the directive should work right out of the box.
When I try to specify ui.bootstrap when defining the ng-app the ng-resource stop working.
var app = angular.module('mainApp', ['ngResource','ui.bootstrap']);
test.html:
<!doctype html>
<html data-ng-app="mainApp">
<head>
<title>Test app/title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
</head>
<body role="document">
<div class="container">
<div class="page-header">
<h1>Test</h1>
</div>
<div ng-controller="PostIndexCtrl">
<div class="row">
<rating value="rate" max="5"></rating>
<div ng-repeat="item in items">
<div class="col-xs-1 col-md-3">
{{item.name}} <img class="thumbnail" src="{{item.photo}}" />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
<script src="js/services.js"></script>
</body>
</html>
service.js:
var app = angular.module('mainApp', ['ngResource']);
app.factory("Post", function($resource) {
return $resource("/api/item");
});
app.controller("PostIndexCtrl", function($scope, Post) {
Post.get(function(data) {
// alert(data.items);
$scope.items = data.items;
});
});
This line in your html seems off to me:
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
Use:
angular-bootstrap/ui-bootstrap-tpls.js
or
angular-bootstrap/ui-bootstrap-tpls.min.js
instead of simply using:
angular-bootstrap/ui-bootstrap.js
which doesn't contain the templates.
If using bower, then install with:
bower install angular-bootstrap
Depending on your setup (and possibly .bowerrc file) the angular-bootstrap directory will, by default, be put in the directory:
bower_components/angular-bootstrap/ (or perhaps simply components/angular-bootstrap in your config)
where you can find the files mentioned above.