I am in the process of changing my app from using Polymer to Angular 1.4 for stability reasons. Because of my familiarity with Polymer and web components (and future use of Angular 2) I am choosing to architect my app using the Component Pattern.
I have searched and thus far only come across this question and the solution was a no longer maintained github repo. I want to know if it is possible to have view encapsulation with Angular 1.4. In case I am misstating, specifically, can my directives with templates have their own encapsulated styles like is done in Polymer and Angular 2 without relying on Grunt?
Seems like it is. I am using Angular 1.6 in my test, but I was able to get shadow DOM working inside an angular directive including bindings.
Here is my sample code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Angular 1.x ShadowDOM example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myElController', ($scope) => {
});
var template = `
<style>
:host {
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%,-50%);
border: 1px solid black;
box-shadow: 4px 4px 4px rgba(0,0,0,.4);
display: inline-block;
padding: 6px 12px;
}
h3 {
border-bottom: 1px solid #999;
margin: 0 -12px 8px;
padding: 0 12px 8px;
}
p {
margin: 0;
}
</style>
<h3>{{title}}</h3>
<p>{{info}}</p>
`;
app.directive('myEl', ($compile) => {
return {
"restrict": "E",
"controller": "myElController",
"template": '',
"scope": {
"title": "#",
"info": "#"
},
"link": function($scope, $element) {
console.log('here');
$scope.shadowRoot = $element[0].attachShadow({mode:'open'});
$scope.shadowRoot.innerHTML = template;
$compile($scope.shadowRoot)($scope);
}
};
});
</script>
</head>
<body>
<div>
<my-el title="This is a title" info="This is the info of the element"></my-el>
</div>
<div class="shell">
<h3>Outside title (H3)</h3>
<p>Outside content (P)</p>
</div>
</body>
</html>
The trick is to not have a default template for the directive. Just us an empty string. Then, in the link function you would create the shadow root and set it's innerHTML to your real template. Then you need to run $compile on the shadow root to bind it back to the directive's $scope.
Be aware that this will only work on a browser that natively supports shadow DOM. Any Polyfill will not support real CSS encapsulation. For that it is better to use a form of BEM CSS: http://getbem.com/introduction/
Related
I am working on an application where I have to set item class to active but Its not working. It's not in the ng-repeat list. Its 4 normal button that has to be active when clicked on it.
Try achieving this by ng-class as shown below.
Controller
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
$scope.isActive = false;
$scope.activeButton = function() {
$scope.isActive = !$scope.isActive;
}
});
CSS
$base: #F8E1C2;
$button: #3D3240;
$button-active: #FF735C;
$margin: 40px;
body {
background: $base;
-webkit-font-smoothing: antialiased;
padding: $margin;
text-align: center;
}
.button {
border: none;
padding: 14px;
color: #fff;
margin: 0 10px;
background: $button;
font-weight: 700;
border-radius: 4px;
}
.active {
background: $button-active;
}
.disabled {
background: #eee;
color: #aaa;
}
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button class="button" ng-class="{'active': isActive}" ng-click="activeButton()" type="button">Click Me</button>
</div>
</body>
</html>
remove single quotes on class name active, like from 'active' to active
My problem is that my AngularJS (latest v1.X) can't add to the DOM svg elements I'm generating from it in IE.
I have no errors showing in the dev console. My app is loaded (and thus, the controller), since the width and height of the svg container are set by Angular.
The application is working fine on Firefox, Chrome, Tablets Chrome and Android browser...
My directive :
'use strict';
My_App.directive('ngHtmlCompile', ["$compile", function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, element, attrs) {
scope.$watch(function () {
return scope.$eval(attrs.ngHtmlCompile);
}, function (value) {
element.html(value);
$compile(element.contents())(scope);
});
}
}
}]);
My HTML :
<!DOCTYPE html>
<html lang="fr" ng-app="My_App" ng-controller="App">
<head>
<meta charset="UTF-8">
<title>My App</title>
<style>
* { margin:0; padding:0; #import url('https://fonts.googleapis.com/css?family=Open+Sans'); font-family: 'Open Sans', sans-serif; font-weight: bold; } /* Retire les espaces autour du canvas */
html, body { width:100%; height:100%; } /* Override le comportement des navigateurs */
svg { display:block;background-color: dimgrey;} /* Retire la scrollbar */
svg text {
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::selection, ::-moz-selection{background: none;}
</style>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/MyApp.js"></script>
</head>
<body>
<svg id="MyApp" ng-cloak ng-attr-width="{{svg.width}}" ng-attr-height="{{svg.height}}" ng-html-compile="html"></svg>
</body>
</html>
Controller side, my $scope.html is updated once at startup with a XHR request, then every 5 seconds after it.th ngHtmlCompile is then called to read it, and add the html stored in as childrens of svg.
If anything is missing, you can ask me. First post, so feel free to tell me if I did anything wrong on my request. And last, sorry if my english is broken, I'm French.
Thanks for your help.
Like a comment above said (thanks to Robert Longson), the html() function doesn't work on IE 11. It just doesn't even appear in dev console that something is wrong.
As a solution (mainly, I just did it another way), I used the ngRoute module for angular.
The index.html is now only a container of a <div ng-view> tag, and my <svg> is placed in an include.html. In this, you can use any $scope var in any attribute, and you're done.
I'm not accepting this answer as long no one can tell that we can't generate html on IE11, as it was my original purpose.
If appears as if you can use Element.insertAdjacentHTML() instead of Element.html(). It seems to work on IE11.
var svgStr='<svg><rect width="100%" height="100%" fill="red"/></svg>';
var div = document.getElementById("test");
div.insertAdjacentHTML('afterbegin', svgStr);
<div id="test"></div>
I want to create a button with a ripple effect on clicked.Is it necessary to achieve it through a directive. How do i handle the javascript required to handle the click and propagate the ripple away from the point it was clicked.
I have done it using javascript and css but it is not the angular way.
<!doctype html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>
<body>
<test-elem></test-elem>
<dom-module id="test-elem">
<template>
<style>
div {
width: 150px;
position: relative;
padding: 15px;
border: 1px solid black;
}
button { color: green; border: 1px solid green; }
</style>
<div>
<paper-ripple></paper-ripple>
<button id="btn">Button</button>
</div>
</template>
<script>
Polymer({ is: 'test-elem',
listeners: {'btn.down': 'onDown'},
onDown: function(e) {
e.stopPropagation();
}
});
</script>
</dom-module>
</body>
I'm developing a web component form.
I'm having troubles with angularjs bootsrap.
I'm creating dinamically a custom element with form.createdCallback <form> and <input, textarea etc> and adding ng-app="", ng-controller="" attributes.
Later I encapsule it with template.createShadowRoot()
I use document.addEventListener('DOMContentLoaded', function(){angular.bootstrap(document, ['mform'])}), but doing this not execute anything from my angular app...
So, I tried removing the line template.createShadowRoot() and angular execute everything pretty well... so I arrived to the conclusion that the problem is angular not compiling inside shadow dom.
There's any hack or way to do this?
I'm not sure if this really answers your question, but I am able to get Shadow DOM to work in Angular 1.x. Be aware that if you are after CSS encapsulation, then this will only work on browsers that natively support Shadow DOM since the Polyfill can not do the same thing.
I use $compile to create the contents of the Shadow DOM and bind that back into the directive.
Here is my code example:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Angular 1.x ShadowDOM example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myElController', ($scope) => {
});
var template = `
<style>
:host {
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%,-50%);
border: 1px solid black;
box-shadow: 4px 4px 4px rgba(0,0,0,.4);
display: inline-block;
padding: 6px 12px;
}
h3 {
border-bottom: 1px solid #999;
margin: 0 -12px 8px;
padding: 0 12px 8px;
}
p {
margin: 0;
}
</style>
<h3>{{title}}</h3>
<p>{{info}}</p>
`;
app.directive('myEl', ($compile) => {
return {
"restrict": "E",
"controller": "myElController",
"template": '',
"scope": {
"title": "#",
"info": "#"
},
"link": function($scope, $element) {
console.log('here');
$scope.shadowRoot = $element[0].attachShadow({mode:'open'});
$scope.shadowRoot.innerHTML = template;
$compile($scope.shadowRoot)($scope);
}
};
});
</script>
</head>
<body>
<div>
<my-el title="This is a title" info="This is the info of the element"></my-el>
</div>
<div class="shell">
<h3>Outside title (H3)</h3>
<p>Outside content (P)</p>
</div>
</body>
</html>
Alright, so this might either be an Angular thing (in which case I might also be doing things completely wrong), but it could also be a browser / CSS thing.
"As simple as possible" plunker: https://plnkr.co/edit/t3woLDwynHYgbRDGNZDK
Also, full code (runnable as code snippet) attached to this post.
The example should be pretty clear, though certainly not pretty or designed in any way. If you don't feel like reading the ~20 lines of code, the following is what should happen:
There is a "button", the area with the paste icon in it. When you click it, an operation starts. With it, a spinner (controlled by a variable on the scope) is shown inside the button. When the operation finishes (simulated by the $timeout in the example), a message is set on the scope (imagine a result info message) and the spinner-controlling variable is turned off.
The intent is of course that the spinner should always be rendered inside (position: relative) the box, but during a brief moment while elements are being re-compiled / re-evaluated, it's instead rendered just above the box (or somewhere in between the middle and above).
If you don't see the effect I am describing straightaway, click the "Clear state..." button and try again. Also, you can try different values for the $timeout. For me, a $timeout of ~ 20 ms pretty much always gives me a spinner above the box in Chrome. Firefox seems to require a slightly higher timeout, or it won't even render the spinner half the time.
I initially assumed this to be an effect of Angular re-evaluating the two elements one at a time (re-rendering them), which gave the browser a rendering tick or two to actually draw the spinner incorrectly while it was still showing. However:
What confuses me a bit is that by turning up the $timeout time to something like 200 ms, the problem goes away (or at least my eyes make me believe that), leading me to believe it might not be an Angular problem after all, but a rendering timing one? Perhaps the browser (Chrome in this case, but reproducable in at least Firefox as well) doesn't like hiding the element again after just a tick?
ng-show / ng-if doesn't make a difference here.
Changing the spinner icon for other icons (and removing the spin) doesn't make a difference.
Full code, since it seems to be required now:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.message = undefined;
$scope.loading = false;
$scope.perform = function(event) {
event.stopImmediatePropagation();
$scope.loading = true;
$timeout(function() {
$scope.message = "Some message...";
$scope.loading = false;
}, 35);
};
$scope.clear = function() {
$scope.loading = false;
delete $scope.message;
};
});
#element .resource {
position: relative;
width: 120px;
margin: 0;
padding: 10px;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
font-size: 14px;
text-align: center;
}
#element .resource .shadow {
height: 124px;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 4px;
border: 1px dashed #ccc;
padding-top: 32px;
color: #bbb;
cursor: pointer;
}
#element .resource .shadow:hover {
color: #888;
border-color: #999;
}
#element .resource .shadow.inactive {
color: #bbb;
border-color: #999;
cursor: default;
padding-top: 48px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="font-awesome#*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script data-require="jquery#*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="alert alert-info" ng-show="message">{{message}}</div>
<div id="element">
<div class="resource">
<div x-ng-show="!loading" class="shadow" x-ng-click="perform($event);">
<i class="fa fa-paste fa-2x"></i>
</div>
<div x-ng-show="loading" class="shadow inactive">
<i class="fa fa-spinner fa-spin fa-stack-2x text-info"></i>
</div>
</div>
</div>
<button ng-click="clear();">Clear state...</button>
</body>
</html>