I am using an ng-switch in angularjs to have dynamic content in my page, dependent on the url. And I am managing my project with yeoman. Here is the code of the dynamic content generation:
html:
<div class="div-content bgcontent" id="content">
<span ng-switch on="renderPath[0]">
<div ng-switch-when="home" ng-include="'partials/home.html'"></div>
<div ng-switch-when="gallery" ng-include="'partials/gallery.html'"></div>
</span>
</div>
controller:
$scope.renderPath = $location.path().split('/');
// remove first entry because it's empty string
$scope.renderPath.shift();
This works perfectly well when running the stuff with 'yeoman server'. But if I build with 'yeoman build:minify', it doesn't work anymore afterwards. It hits an assertion:
at assertArg (http://host:8888/scripts/vendor/d10639ae.angular.js:973:11)
at Object.ngDirective.compile (http://host:8888/scripts/vendor/d10639ae.angular.js:13474:5)
at applyDirectivesToNode (http://host:8888/scripts/vendor/d10639ae.angular.js:4047:32)
at compileNodes (http://host:8888/scripts/vendor/d10639ae.angular.js:3794:14)
at compileNodes (http://host:8888/scripts/vendor/d10639ae.angular.js:3799:14)
at compile (http://host:8888/scripts/vendor/d10639ae.angular.js:3739:29)
at update (http://host:8888/scripts/vendor/d10639ae.angular.js:13685:22)
at $get.Scope.$broadcast.next (http://host:8888/scripts/vendor/d10639ae.angular.js:8002:24)
at Array.forEach (native)
at forEach (http://host:8888/scripts/vendor/d10639ae.angular.js:110:11) <!-- ngSwitchWhen: home -->
Does someone know how to fix this? Or where I need to look to debug it?
If you are using dependency-injection within your scripts, make sure to use the minify-proof syntax as described here: http://docs.angularjs.org/guide/di
Related
I have a custom error page for 500 Server Errors in CakePHP 3.
My src\Template\Layout\error.ctp template file has been adjusted to have my default error template in it. And then I've also updated my view file at src\Template\Error\error500.ctp. I even added this line, $this->layout = 'error'; as described in the docs.
This is what my error view looks like:
<?php
use Cake\Core\Configure;
use Cake\Error\Debugger;
$this->layout = 'error';
$this->Html->addCrumb('Error');
?>
<section class="content">
<div class="error-page">
<h2 class="headline text-red">500</h2>
<div class="error-content">
<h3><i class="fa fa-warning text-red"></i> Oops! Something went wrong.</h3>
<p>
We will work on fixing that right away.
Meanwhile, you may return to dashboard or try using the search form.
</p>
</div>
</div>
</section>
However, it still shows the default CakePHP error page.
What am I missing?
Just turn off the debug in app.php like
'debug' => false
As it written in cookbook
Each framework layer exception has its own view file located in the core templates but you really don’t need to bother customizing them as they are used only during development. With debug turned off all framework layer exceptions are converted to InternalErrorException
For detailed info about ExceptionRenderer visit here
I am using the following html code to create an ng-repeat:
<td ng-repeat="parentCategory in totalParentCategoriesCount | orderBy :'-Count'">
<h3>
Kategori
<span class="sortorder" ng-show="predicate === 'CategoryParent{{parentCategory.Count}}'" ng-class="{reverse:reverse}"></span>
</h3>
</td>
I wish to add the text CategoryParent with the number from parentCategory.Count to create a dynamic link.
When inspecting the link in the browser I get the corret outcome which is CategoryParent0, CategoryParent1, CategoryParent2 and so on. But when clicking the link I get the following error:
Error: [$parse:syntax] http://errors.angularjs.org/1.2.16/$parse/syntax?p0=%7B&p1=is%20an%20unexpe…Parent%7B%7BparentCategory.Count%7D%7D&p4=%7B%7BparentCategory.Count%7D%7D
at Error (native)
at http://localhost:51976/Scripts/angular.min.js:6:450
at $a.throwError (http://localhost:51976/Scripts/angular.min.js:165:141)
at $a.parse (http://localhost:51976/Scripts/angular.min.js:164:6)
at $get (http://localhost:51976/Scripts/angular.min.js:96:122)
at http://localhost:51976/Scripts/angular.min.js:129:290
at http://localhost:51976/Scripts/angular.min.js:10:248
at Array.forEach (native)
at q (http://localhost:51976/Scripts/angular.min.js:7:280)
at Uc (http://localhost:51976/Scripts/angular.min.js:10:219)
On the angular page its says the following:
Syntax Error: Token '{' is an unexpected token at column 15 of the expression [CategoryParent{{parentCategory.Count}}] starting at [{{parentCategory.Count}}].
I have been looking at this answer AngularJS expression throwing a Syntax error in ng-click and therefore tried many different compinations in the order() method but I cant figure out how to make the link dynamic without using brackets.
Right now the parentCategory.Count is an int but I have also tried to parse it to a string but without any success.
ng-click already takes an Angular expression - so no need for the {{}}
ng-click="order('CategoryParent' + parentCategory.Count)"
I'm getting a very very strange issue with Angularjs, I'm using a directive where I defined an inline template on page like this:
<script type="text/ng-template" id="breadcrumb.html"> {[ state.current.displayName ]} </script>
However, I'm getting this weird error:
> Error: JSON.parse: expected property name or '}'
> fromJson#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1035
> #http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:6926
> transformData/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:6901
> forEach#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:302
> transformData#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:6900
> transformResponse#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:7570
> qFactory/defer/deferred.promise.then/wrappedCallback#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:10905
> qFactory/ref/<.then/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:10991
> Scope.prototype.$eval#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:11906
> Scope.prototype.$digest#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:11734
> Scope.prototype.$apply#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:12012
> bootstrap/doBootstrap/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1299
> invoke#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:3697
> bootstrap/doBootstrap#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1298
> bootstrap#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1311
> angularInit#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1260
> #http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:20534
> x.Callbacks/c#http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
> x.Callbacks/p.fireWith#http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
> .ready#http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
> q#http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
Now, if I actually add something into the template, for example any random character like this:
<script type="text/ng-template" id="breadcrumb.html"> a{[ state.current.displayName ]} </script>
Then the error goes away, everything renders fine.
PS: Note that I changed from {{}} to {[]} to avoid syntax conflict with Twig
Edit:
In respond to the interpolate issue, I already use:
angular.module('myapp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[').endSymbol(']}');
}
);
Shouldn't this be enough. And if that doesn't work, the why does putting a random character 'a' to it helps?
Edit 2:
Plunker added:
Please check this link for working code:
http://plnkr.co/edit/OQiJovrNzOraJdsSXeSY?p=preview
Please check this link for non-working code:
http://plnkr.co/edit/IzGpTdnqmO5MxtldnKec?p=preview
Angular expects {{}} for interpolation.
To avoid conflicts you can use ng-bind:
<script type="text/ng-template" id="breadcrumb.html" ng-bind="state.current.displayName"></script>
But, I've never tried it with a <script> tag though.
This is a confirmed issue of the current version of Angular JS (1.2.x)
I have submitted a ticket here:
https://github.com/angular/angular.js/issues/5756
I used $index inside simple ng-repeat to show items' number:
<li ng-repeat="item in dataList | limitTo:5">
<span>{{ $index + 1 }} </span>
</li>
And it worked OK for long time.
But sudden couple days ago I started getting:
Error: Error while interpolating: {{ $index + 1 }} illegal access
at Error (native)
at Object.k (/vendors/angular/angular.min.js:55:287)
at Object.e.$digest (/vendors/angular/angular.min.js:90:233)
at Object.e.$apply (/vendors/angular/angular.min.js:92:431)
at Object.<anonymous> (/js/controllers/HomePage.js:99:28)
at l (/vendors/jquery/jquery.min.js:4:24797)
at Object.c.fireWith [as resolveWith] (/vendors/jquery/jquery.min.js:4:25618)
at k (/vendors/jquery/jquery.min.js:6:5201)
at XMLHttpRequest.<anonymous> (/vendors/jquery/jquery.min.js:6:9005)
at both production and local environments.
Data in dataList is correct and the same as was all time previous.
It is reproducible only in latest Chrome (32.0.1700.14) in other browsers it still working correct.
Any ideas why this can happen and how it can be fixed?
Angular version: 1.1.5.
Debugging showed that exception is thrown from angular.js:6371 on native adding operation, and it is not about AngularJS itself.
For those who are getting same issue, looks like the only solution is to find any alternative way of implementing your task on which it is failing. At least till next Google Chrome update.
Thanks to #Heikki for pointing to chromium issues tracker.
Since the bug is related to String + Number concatenation I am using toString() on the numbers as a temp workaround.
{{($index + 1).toString()}}
worked in my case.
At the Angular-UI-Bootstrap page on cdnjs, is says:
Native AngularJS (Angular) directives for Twitter's Bootstrap. Small footprint (5 kB gzipped!), no third-party JavaScript dependencies (jQuery, Bootstrap JavaScript) required!
... and has options for
//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js
and
//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js
Diff'ing these shows a subtle difference, and I can't seem to find any documentation on it...
Long story short, use tpls unless you are going to create customized
templates.
It is documented here:
github.com/angular-ui/bootstrap/tree/gh-pages#build-files (linked from
the home page as well). In short the -tpls version has default Bootstrap
templates bundled. In any case you should only include one of the
listed files. - Thanks pkozlowski.opensource
So, ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + HTML templates) required by the JavaScript code. If you only included ui-bootstrap.min.js, you will also need to provide your own HTML templates.
Otherwise you will see something like:
GET http://localhost:8989/hello-world/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:7073
Error: [$compile:tpload] http://errors.angularjs.org/undefined/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
at Error (<anonymous>)
at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:6:453
at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:54:14
at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:64:438
at A (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:89:258)
at A (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:89:258)
at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:90:465
at g.$eval (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:98:272)
at g.$digest (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:96:142)
at g.$apply (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:99:100)
The tpls tag means that the file also contains templates.
Here is an example:
ui-bootstrap.js
angular.module("ui.bootstrap"
["ui.bootstrap.transition"
"ui.bootstrap.collapse"
"ui.bootstrap.accordion"
"ui.bootstrap.alert"
"ui.bootstrap.bindHtml"
"ui.bootstrap.buttons"
"ui.bootstrap.carousel"
"ui.bootstrap.position"
"ui.bootstrap.datepicker"
"ui.bootstrap.dropdownToggle"
"ui.bootstrap.modal"
"ui.bootstrap.pagination"
"ui.bootstrap.tooltip"
"ui.bootstrap.popover"
"ui.bootstrap.progressbar"
"ui.bootstrap.rating"
"ui.bootstrap.tabs"
"ui.bootstrap.timepicker"
"ui.bootstrap.typeahead"]);
angular.module('ui.bootstrap.transition'
[])
ui-bootstrap-tpls.js
angular.module("ui.bootstrap"
["ui.bootstrap.tpls"
"ui.bootstrap.transition"
"ui.bootstrap.collapse"
"ui.bootstrap.accordion"
"ui.bootstrap.alert"
"ui.bootstrap.bindHtml"
"ui.bootstrap.buttons"
"ui.bootstrap.carousel"
"ui.bootstrap.position"
"ui.bootstrap.datepicker"
"ui.bootstrap.dropdownToggle"
"ui.bootstrap.modal"
"ui.bootstrap.pagination"
"ui.bootstrap.tooltip"
"ui.bootstrap.popover"
"ui.bootstrap.progressbar"
"ui.bootstrap.rating"
"ui.bootstrap.tabs"
"ui.bootstrap.timepicker"
"ui.bootstrap.typeahead"]);
angular.module("ui.bootstrap.tpls"
["template/accordion/accordion-group.html"
"template/accordion/accordion.html"
"template/alert/alert.html"
"template/carousel/carousel.html"
"template/carousel/slide.html"
"template/datepicker/datepicker.html"
"template/datepicker/popup.html"
"template/modal/backdrop.html"
"template/modal/window.html"
"template/pagination/pager.html"
"template/pagination/pagination.html"
"template/tooltip/tooltip-html-unsafe-popup.html"
"template/tooltip/tooltip-popup.html"
"template/popover/popover.html"
"template/progressbar/bar.html"
"template/progressbar/progress.html"
"template/rating/rating.html"
"template/tabs/tab.html"
"template/tabs/tabset-titles.html"
"template/tabs/tabset.html"
"template/timepicker/timepicker.html"
"template/typeahead/typeahead-match.html"
"template/typeahead/typeahead-popup.html"]);
angular.module('ui.bootstrap.transition'
[])
For example: template/alert/alert.html
angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/alert/alert.html",
"<div class='alert' ng-class='type && \"alert-\" + type'>\n" +
" <button ng-show='closeable' type='button' class='close' ng-click='close()'>×</button>\n" +
" <div ng-transclude></div>\n" +
"</div>\n" +
"");
}]);
People have answered this question already, but I wanted to point out that starting with release 0.13.4, we've added the ability to provide your own templates on a case-by-case basis (i.e., each directive use, not application wide, though, the latter would not be hard to do).