Is it possible to call a function inside a module from html?
For example, like something below:
es6 module: main.js
function download(){
}
export {download}
html file:
<script type="module" src="main.js"></script>
<button id="download" onclick="download()"></button>
I found the solution.
Html search for functions residing in window object.
Than it is necessary to assign the function to window:
es6 module: main.js
function download(){
}
window.download = download
Related
In my browser, the value of the angular curly braces is not displayed. There are no errors in the console and the console logs the value, but in my browser its a blank page. However it should say 'hello World' in the top left.
my app.js:
(function() {
'use strict';
angular.module('testModule', []);
}());
my controller:
(function () {
'use strict';
angular
.module('testModule')
.controller('testController', Controller);
Controller.$inject = [];
function Controller() {
var vm = this;
vm.test = "hello World";
activate();
function activate() {
console.log(vm.test);
}
}
})();
my html:
<body ng-controller="testController">
<div>
{{vm.test}}
</div>
</body>
You need to rewrite this line
<body ng-controller="testController">
as
<body ng-controller="testController as vm">
This is because you are using this inside your controller and referencing the scope variable with this cannot be accessed directly by the Angular expression so you need to create a alias of the controller using as you can give it any alias. Then use this alias to access the scope variable. If you use
`<body ng-controller="testController as ctrl">`
then you need to access by {{ctrl.test}}
in template update it like; (As you're using controller as syntax)
ng-controller="testController as vm"
Here's a working plunker
http://plnkr.co/edit/tbENuThIIszfe2D2e4qx?p=preview
The Output in the inspect element:
<div ng-bind-html="job.description" class="ng-binding">
"<p><strong>Our Responsibilities</strong></p>"
</div>
This is my HTML code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.3.20/angular-sanitize.min.js"></script>
var myApp = angular.module('rivigoApp', ['ngSanitize']);
<div ng-bind-html="job.description"></div>
How do I do to make it compile the HTML in the output? I believe the main issue is with the quotes "" but I'm unable to figure out how to proceed. I've tried using various other methods.
inject $sce Service in your controller and use it like below
app.controller('mainCtrl',function($sce , $scope){
$scope.job = {
description : $sce.trustAsHtml("<p><strong>Our Responsibilities</strong></p>")
};
})
$sce Reference
What I'm trying to do is define a module of utility functions, browserify it
and use it in a polymer component. Since this post:
require is not defined error with browserify
makes it clear that 'require' is only defined within the scope of the bundle (xx.js), I need
help figuring out how to access my exported function.
Here is the gist:
file: x.js
module.exports = function() {console.log("hi");}
I run
browserify x.js> xx.js
file xx.js (edited)
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==...
module.exports = function() {console.log("hi");}
},{}]},{},[1]);
My polymer component (edited)
<link rel="import" href="../../bower_components/polymer/polymer.html">
<script type="text/javascript" src="xx.js"></script>
<dom-module id="Hello-app">
<template> </template>
<script>
Polymer({
is: 'Hello-app',
ready: function() {/* how do I access the function here, so it prints "hi" */}
});
</script>
</dom-module>
Ah, I should have read the docs for browserify more carefully.
I just needed the '-r' option, like so:
browserify -r ./x.js:hello > xx.js
and now I can modify the ready: line to read
ready: function() {require('hello')()},
I am trying to build a simple web app that communicates with an external API , for the first step i wish to check if my controller,service-html integration is all in placed , so I'm tying to bind a simple variable from the controller to the view, but i am getting {{msg}} instead of a successful bind.
please ignore the service for now its just my fundumentals for later on.
main.html :
<!DOCTYPE html>
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="controller.js"></script>
<head></head>
<body ng-app="queueApi" ng-controller="MainController">
<div>
<h1>{{msg}}</h1>
</div>
</body>
</html>
queueservice.js
angular.module('queueApi')
.factory('queueService', function ($resource){
return $resource('http://127.0.0.1:8080/queue/:id',{id: '#id'});
});
controller.js
var app = angular.module('queueApi' , ['ngResource']);
app.controller('MainController', function($scope,$http, queueService){
$scope.msg = "Hi tom";
// $scope.items = queueService.query({id:2}); //getting all from id 2
});
If you look at your console you can see the error in module creation. It is because the ngResource module is in external source file rather than angular.min.js. Add also the angular-resource.js.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.min.js"></script>
<script src="controller.js"></script>
In addition to Hamlet Hakobyan's answer, you must ensure that your modules have been included in correct order. With your code structure controller.js should precede queueservice.js.
From the documentation:
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
I was trying to import certain script depending on which URL I'm.
Simple <script> tag in my HTML is:
<html ng-app="myApp">
...
<script type="text/javascript" src="{{srcRoute}}" language="JavaScript"></script>
...
</html>
I was trying to get this after main module "myApp", in a run block:
angular.module('myApp', [])
.config(function($routeProvider) {
$routeProvider.
when('/', {controller: MyController, templateUrl: 'partials/home.html'}).
otherwise({redirectTo: '/'});
})
.run(function($rootScope) {
$rootScope.srcRoute = 'some/route/here.js';
});
but when running this I get something like:
GET myRoute/%7B%7BsrcRoute%7D%7D 404 (Not Found)
What I want to do is add a conditional sentence in the run block to decide which route to use. Is there a way to do this?
Thanks!