In AngularJS Material's official site, I tried this demo on my laptop: AngularJS Material | Custom Separator Keys. Everything's good except for my <code> HTML element tag that doesn't get the right CSS styling. I inspected the element and this should be the actual style (like the result in AngularJS Material Demo and also in codepen):
I don't know what is wrong with my code. Having the problem in my <code> element tag could mean that it might be the same case if I use the other HTML elements in my code (not getting the AngularJS Material Design).
PS. My code is different from the demo because I have to change the format of my code in order for it to work (I don't know the reason why I can't directly inject "the self-invoking function-way" to my controller. I had to create a module first before I can connect it with my controller)
Here is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | AngularJS Material Design (Practice)</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.22/angular-material.min.css">
<style>
.chipsdemoCustomSeparatorKeys h2 {
margin-bottom: 0;
}
</style>
</head>
<body>
<div ng-controller="CustomSeparatorCtrl" layout="column" ng-cloak="" class="chipsdemoCustomSeparatorKeys"
ng-app="MyApp">
<md-content class="md-padding" layout="column">
<h2 class="md-title">
Use <code>md-separator-keys</code> to customize the key codes which trigger chip creation.
</h2>
<md-subheader id="commaSeparatorKeyDescription">
You can use either the Enter or Comma keys to trigger chip creation.
</md-subheader>
<md-chips ng-model="tags" input-aria-label="Tags" md-separator-keys="keys" placeholder="Ex. angularjs-material"
secondary-placeholder="Add another tag" input-aria-describedby="commaSeparatorKeyDescription">
</md-chips>
<br>
<h2 class="md-title">Add custom separator key codes such as semicolon for e-mails.</h2>
<md-subheader id="customSeparatorKeyDescription">
You can use the Semicolon, Enter, or Comma keys to trigger chip creation.
</md-subheader>
<md-chips ng-model="contacts" input-aria-label="Emails" md-separator-keys="customKeys"
placeholder="Ex. [email protected]" secondary-placeholder="Add another email address"
input-aria-describedby="customSeparatorKeyDescription">
</md-chips>
</md-content>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.22/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route/1.8.0/angular-route.min.js"></script>
<!-- <script src="angular-route.min.js"></script> -->
<script>
var app1 = angular.module('MyApp', ["ngMaterial"]);
app1.controller('CustomSeparatorCtrl', DemoCtrl);
function DemoCtrl($scope, $mdConstant) {
$scope.keys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA];
$scope.tags = [];
// Any key code can be used to create a custom separator
var semicolon = 186;
$scope.customKeys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA, semicolon];
$scope.contacts = ['[email protected]'];
}
</script>
</body>
</html>
Thank you!
<code>styling in the documention is coming from a seperate stylesheet and isn't part of the AngularJS Material standard CSS.