wmluke / angular-blocks Goto Github PK
View Code? Open in Web Editor NEWTemplate inheritance for Angular JS
Home Page: http://www.bunselmeyer.net/#!/thoughts/angular-blocks
License: MIT License
Template inheritance for Angular JS
Home Page: http://www.bunselmeyer.net/#!/thoughts/angular-blocks
License: MIT License
Hi,
This is more of a feature request than an actual issue.
The final DOM structure contains the <div data-extend-template="">
and <div data-block="">
nodes which can be a problem when writing css.
Would it technically be possible to remove these after the template has been compiled?
It would be nice if we could pass an option into the directive to turn this behaviour on or off.
Cheers
I tried on 2 html pages
layout.html
<html ng-app="chMobile">
<head>
<script src='static/js/libs/jquery/jquery-2.1.3.min.js'></script>
<script type="text/javascript" src='static/js/libs/angular/angular.min.js'></script>
<script type="text/javascript" src='static/js/libs/angular/angular-route.min.js'></script>
<script type="text/javascript" src='static/js/libs/angular/ng/angular-blocks.min.js'></script>
<script type="text/javascript" src='static/ng-js/apps/chMobile.js'></script>
</head>
<body>
<script type="text/ng-template" id="layout.html">
<div>A</div>
<div data-block="fc">
<p>S</p>
</div>
<div>Z</div>
</script>
<div ng-include="'html/external.html'"></div>
</body>
</html>
x.html
<div data-extend-template="layout.html">
<div data-block="fc">
H
</div>
</div>
chMobile.js
var chMobile = angular.module('chMobile', ['ngRoute','angular-blocks']);
I have written full code of these 3 files. When I run x.html, I expect AHZ as output (like in django templates) but output is only H (directly). What went wrong?
Is this module works with routing?
index.html (this is what i have between body):
<div ng-view></div>
In this div i call with routing this template - partials/inbox.html:
<div data-extend-template="/partials/layout.html">
<div data-block="content">
<p>Foo</p>
</div>
</div>
and here's /partials/layout.html
<script type="text/ng-template" id="/partials/layout.html">
<header data-block="header">
<p>:header</p>
</header>
<div data-block="content">
<p>:content</p>
</div>
<footer data-block="footer">
<p>:footer</p>
</footer>
</script>
Then I've got this error:
Error: $clone.children(...).each is not a function extendTemplate/<.compile/loadTemplate<@http://127.0.0.1:8000/assets/lib/angular/angular-blocks.js:35
qFactory/defer/deferred.promise.then/wrappedCallback@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:11319
qFactory/ref/<.then/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:11405
$RootScopeProvider/this.$get</Scope.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:12412
$RootScopeProvider/this.$get</Scope.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:12224
$RootScopeProvider/this.$get</Scope.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:12516
done@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:8204
completeRequest@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:8412
createHttpBackend/</xhr.onreadystatechange@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:8355
I wanted to know if angular-blocks
compatible with angular-ui-router
?
I had tried to get them to work together, but didn't have any luck so far. I've only been using Angular for 2 months, sorry if this is a simple question that I just couldn't figure out.
Thank you
Hi, I am trying to use 'angular-blocks' but I am receiving a warning.
My template has this code:
<script type="text/ng-template" id="/fc-layout.html">
<div data-block="fc">
<p>:fc</p>
</div>
</script>
and my custom page has the next code:
<div data-extend-template="/fc-layout.html">
<div data-block="fc">
...
</div>
</div>
I am getting empty pages and "Failed to find data-block=fc in /fc-layout.html" message in console.
Can anyone help with this problem?
Thanks
The error appears here at first line:
$clone.children('[data-block]').each(function () {
override('replaceWith', $(this), 'data-block');
});
TypeError: undefined is not a function
at compile.$http.get.then.msg (http://bude/symfony-24/web/bundles/jarves/admin/js/lib/angular-blocks.js?c=9f5345:35:57)
at p.promise.then.w (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js:100:398)
at p.promise.then.w (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js:100:398)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js:102:64
at g.$get.g.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js:113:390)
at g.$get.g.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js:110:460)
at g.ng.config.$provide.decorator.$delegate.__proto__.$digest (<anonymous>:844:31)
at g.$get.g.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js:114:208)
at g.ng.config.$provide.decorator.$delegate.__proto__.$apply (<anonymous>:855:30)
at p (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js:74:181)
I've loaded jQuery v1.11.1.
I just dropped this on the floor when I discovered the jQuery dependency.
My most recent attempt to install via bower failed with:
bower error Could not find tag satisfying: angular#1.0 - 1.2.0
There were errors, here's a summary of them:
- angular Could not find tag satisfying: angular#1.0 - 1.2.0
The tag 1.0 - 1.2.0 could not be found within the repository
Thanks for your great work on this package, it really helps a lot.
In my usage I found the attributes defined in block elements could not be inherited. This sometimes makes an additional wrap element to define them. And also makes the attributes duplicated in each extended block definition.
So I wander as my title, it would be very nice to have this feature.
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.