I am trying to add html to a div as follows:
$scope.thehtml = $sce.trustAsHtml("<b>hello</b>")
<div ng-bind-html="thehtml">
</div>
I see following error in console:
TypeError: undefined is not a function
at htmlParser (js/angular/angular-sanitize.js:205:17)
at $sanitize (js/angular/angular-sanitize.js:119:5)
at Object.ngBindHtmlWatchAction [as fn] (js/angular/angular-sanitize.js:420:15)
at h.$get.h.$digest (js/angular/angular.min-125.js:98:396)
The angular-sanitize.js:205:17 is this:
if ( html.indexOf("<!--") === 0 ) {
index = html.indexOf("-->");
Apparently html is not being treated as a String, therfore the error on indexOf ?
I have included the angular-sanitize.js, and added module 'ngSanitize' to the app.
Please see this plunk.
From what I can see your implementation looks fine! My plunk is working and I am not getting an exception with the same code.
I have not had to add ngSanitize as a dependancy of the module, I have just injected $sce into my controller.
The versions of the libraries I have used are as follows:
https://code.angularjs.org/1.2.28/angular.js
https://code.angularjs.org/1.2.0-rc.3/angular-sanitize.js
Please try replacing your script references with these versions to see if it the libs that are at fault.
Let me know how you get on! Good luck :)
Include angular first, then angular-sanitize:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.y.z/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.y.z/angular-sanitize.js"></script>
Related
Yes, this question may be repeated. But I just don't get this setup working in any way.
I tried prettty much everything:
Getting the libraries directly into the index.html through a CDN.
Installing them via NPM and then adding them to angular-cli.json script field.
Importing the modules directly into my components, both with aliased JQuery (import * as $ from 'jquery') and just plain import (import 'jquery').
I tried other setups, like doing the imports in the root component, importing these libraries in various locations... but I don't get this working.
Currently, I need to get working one Bootstrap modal, and one Datepicker component which also works with JQuery, but it's being impossible for me. Sometimes I get the '$ is undefined' and sometimes I get other errors.
So now, I will ask: which is the real solution for this problem in latest Angular versions? How should I make the imports?
Thank you!
EDIT: Current situation:
Added the dependencies to the angular-cli.json file:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
I try to call the .modal() function that bootstrap has to add to Jquery:
( $('#myModal')).modal({
backdrop: true,
focus: true,
show: true
})
But it just throws...:
SegmentsComponent.html:15 ERROR ReferenceError: $ is not defined
at SegmentsComponent.openModal (segments.component.ts:55)
at Object.eval [as handleEvent] (SegmentsComponent.html:15)
at handleEvent (core.js:13255)
at callWithDebugContext (core.js:14740)
at Object.debugHandleEvent [as handleEvent] (core.js:14327)
at dispatchEvent (core.js:9704)
at eval (core.js:10318)
at HTMLAnchorElement.eval (platform-browser.js:2614)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4620)
Any help?
mmmmm .. it looks very strange .. the only reason why it can gives to you $ is not defined is because you DON'T INCLUDE IT well..
so what i can suggest to you is to DOUBLE check your jquery path in the scripts :[] section ..
REMEMBER .. the path is intended from the src(or your root: entry) folder!
ALSO check the jquery version .. I saw that NPM don't include jquery when you do install bootstrap ... so install jquery manually and get the right version ..
AND in your .ts file .. have you declare var $ : any in the head of your ts file? ...
Hope it helps you!
You need to install Jquery and bootstrap (popper for Bootstrap 4) with package managers or CDN. Your .angular-cli.json file must look like this:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Make sure these three files exist.
I found the answer, it can be solved by two methods one is included js file in index.html or ou can include like this, also you can include js as well as jquery.
ngOnInit() {
$(document).ready(function () {
$.getScript('../../assets/frontend/js/app.js', function (w) { });
}); }
Here is the problem,
I am actually trying the examples available there :
https://github.com/angular/material2
And I am stuck on this one :
https://github.com/angular/material2/tree/master/src/demo-app/autocomplete
I use angular2 with CLI, so I have a fresh template and I try to "copy/paste" this component. But it fails with this message :
Unhandled Promise rejection: Template parse errors:
Can't bind to 'mdAutocomplete' since it isn't a known propery of 'input'. ("
<div class="demo-autocomplete">
<md-input-container>
<input mdInput placeholder="state" [ERROR ->][mdAutocomplete]="auto">
...
...
There is no directive with "exportAs" set to "mdAutocomplete"
...
Looks like the mdAutocomplete directive does not exist.
I follow the example step by step, is there something wrong ?
Thanks for reading/help
MdAutoComplete isn't finished yet! https://github.com/angular/material2/tree/master/src/lib/autocomplete
material2's changelog says:
https://github.com/angular/material2/blob/master/CHANGELOG.md
2.0.0-beta.1 rebar-teacup (2016-12-23)
Remove MdAutocompleteModule that was accidentally included in beta.0
Correct path to umd bundle in package.json (#2368) (d286e6d), closes #2366
I have a webpack-dev-server running that compiles and serves some Babel/React code. I have gotten as far as to have it serve the compiled client.js over localhost:3001.
But when I try to include the script in my HTML, I get the following error in Chrome's developer console:
routerWarning.js:19 Uncaught SyntaxError: Unexpected token :
That line belongs to react-router and contains the following code:
process.env.NODE_ENV !== 'production' ? _warning2['default'].apply(undefined, [falseToWarn, message].concat(args)) : undefined;
First, I don't see how that line of code would cause a syntax error. And second, I don't understand how it got in, because this looks like a piece of compiled (babelified) code to me. And finally, I don't know how to fix it! :(
Any help would be greatly appreciated.
I was using webpack's DefinePlugin to set process.env.BABEL_ENV like this:
new DefinePlugin({
'process.env': {
BABEL_ENV: JSON.stringify('client')
}
});
This resulted in webpack replacing all instances of process.env in the code with {"BABEL_ENV":"client"}. The SyntaxError was caused in this part, not in the ternary expression.
I fixed it by setting process.env.BABEL_ENV like this:
new DefinePlugin({
'process.env.BABEL_ENV': JSON.stringify('client')
});
I am developing an Ionic app with $cordovaSQLite installed, but when I tried running openDatabase, I got the error "TypeError: Cannot read property 'openDatabase' of undefined".
I double checked my code that the openDatabase call is inside the $ionicPlatform.ready function and the database file has been properly installed, may I have any advices?
Thanks and Regards,
Jimmy
First make sure you have ngCordova properly installed. (install instructions can be found on ngcordova website), along with the named plugin.
When you get undefined error you should always look if you have the dependency defined. That is the most common mistake with people starting with AngularJS.
Example code:
//inject your dependencies;
ControllerOrConfigFunction.$inject = ["$scope", "$cordovaSQLite"]
function ControllerOrConfigFunction($scope,$cordovaSQLite){
//your code here
}
This applies to all functions in which you are using the $cordovaSQLite plugin.
You can also find a great example on ngCordova website.
There are multiple ways you can define your Dependency Injection in AngularJs, i recommend it for now, after that take a look at ng-annotate.
if (window.cordova) {
db = $cordovaSQLite.openDB({ name: "my.db" }); //Device
console.log("Android");
}
else
{
db = window.openDatabase("my.db", '1', 'my', 1024 * 1024 * 100); // Browser
console.log("browser");
}
I'm learning AngularJS and trying do like on video but I found problem. I've got this 2 errors:
Uncaught Error: No module: ui.directives
Uncaught Error: No module: ui.directives.sortable
In my app.js I have like they said on github:
angular.module('507917App', ['ui.directives.sortable'])
And also I've added this line to code:
<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>
Looking into path and there is definition for ui.directives:
angular.module('ui.directives').directive('uiSortable', [...
Question
Is there anything what I missed or do wrong? Why I've got this errors?
Try changing it to angular.module('507917App', ['ui.sortable']). It worked for me. If you look in the actual sortable.js file, that's the name of the module. I believe the developer just forgot to update that on the documentations.
Ok I found solution. Before including this script (or other component from angular-ui):
<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>
you need also include this:
<script type="text/javascript" src="components/angular-ui/build/angular-ui.js"></script>
also first line of app should looks like here:
angular.module('507917App', ['ui'])