wmluke / angular-blocks Goto Github PK

View Code? Open in Web Editor NEW

216.0 216.0 26.0 431 KB

Template inheritance for Angular JS

Home Page: http://www.bunselmeyer.net/#!/thoughts/angular-blocks

License: MIT License

JavaScript 93.80% Makefile 6.20%

angular-blocks's People

Contributors

Stargazers

Watchers

angular-blocks's Issues

Failed to find data-block

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

Could the attributes be inherited from parent block?

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.

Error: $clone.children(...).each is not a function

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

Cannot be installed via Bower

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

Possibility to remove directive nodes in final DOM

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

Remove jQuery Dependency

I just dropped this on the floor when I discovered the jQuery dependency.

Is `angular-blocks` compatible with `ui.router` ?

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

undefined is not a function

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 tried using angular-blocks but it is not working, docs are limited, can you please help?

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?

wmluke / angular-blocks Goto Github PK

angular-blocks's People

Contributors

Stargazers

Watchers

Forkers

angular-blocks's Issues

Failed to find data-block

Could the attributes be inherited from parent block?

Error: $clone.children(...).each is not a function

Cannot be installed via Bower

Possibility to remove directive nodes in final DOM

Remove jQuery Dependency

Is `angular-blocks` compatible with `ui.router` ?

undefined is not a function

I tried using angular-blocks but it is not working, docs are limited, can you please help?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs