I would like to render Json to angularJs in my view, so in a file events.scala.html I have this :
#(events: play.api.libs.json.JsValue)
#events
And it works fine, my Json data is displayed on my page.
But I would like to transmit this Json to angularJs, I would like to do something like this :
#(events: play.api.libs.json.JsValue)
#main(title = "title") {
<script>
app.controller ('TestCtrl', function ($scope){
$scope.events = </script> #events <script>
});
</script>
<div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>
}
How should I proceed?
Have you tried not to close the script tag ?
#(events: play.api.libs.json.JsValue)
#main(title = "title") {
<script>
app.controller ('TestCtrl', function ($scope){
$scope.events = #events ;
});
</script>
<div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>
}
the play templates will be rendered before the javascript is interpreted in the browser so the above will be transformed as
<script>
app.controller ('TestCtrl', function ($scope){
$scope.events = [{name:"event1"},{name:"event2"}] ;
});
</script>
<div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>
once the browser receives it, it will interpret it. If the above is a valid angular program there is no reason it shouldn't work.
Related
I want to remove the dependency of Iframe from my application. What are the possible way I can call a different application URL other than using iframe, object or html embeded variable.
I am trying something like this.
<body>
<a class="ajax" href="http://www.google.com">
Open in Modal Window
</a>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:none" class="Waiting"></div>').appendTo('body');
dialog.dialog({
close: function(event, ui) {
dialog.remove();
},
modal: true
});
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.removeClass('Waiting');
}
);
return false;
});
});
</script>
</body>
sorry can't comment
assuming there's no no anti CSF or similar measures on the target website you can use JavaScript ajax
or do it server side by grabbing the site
for better help describe what you're trying to archive what you did providing sample code if possible
I have seen quite a few similar questions but they all seem to be related to <p> tags and are not working for scripts.
The below snippet is a e-signable pdf - it is not rendering in here for some reason but if placed in a .html it would just be a basic pdf with 2 signable fields.
<script type='text/javascript' language='JavaScript' src='https://secure.eu1.echosign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhBErQXBc488fW6dc9TExmomSqMLibzpk1duAQnawv3c1xGBoAjI-zvPUGWe1goCLs0*'></script>
I receive the script via json and I am trying to embed it onto a html page on when it is returned. I am using ngSanitize This is what I have tried so far...
Angular:
vm.someFunction = function () {
$http({
url: 'https://api.eu1.echosign.com/api/rest/v5/widgets',
method: "POST",
data:
{
// ... json data
}
}).then(function (response) {
$scope.data = response.data;
$scope.script = {content : response.data.javascript };
}
)};
});
HTML:
<div ng-app="MyApp" ng-controller="MyCntrl as vm">
<p ng-bind-html="script.content"></p>
</div>
I have seen that link it is returning a javascript function as a string.
document.write('<iframe src="https://secure.eu1.echosign.com/public/esignWidget?wid=CBFCIBAA3AAABLblqZhBErQXBc488fW6dc9TExmomSqMLibzpk1duAQnawv3c1xGBoAjI-zvPUGWe1goCLs0*&hosted=false&token=&firstName=&lastName=&nameEditable=true" width="100%" height="100%" frameborder="0" style="border: 0; overflow: hidden; min-height: 500px; min-width: 600px;"></iframe>');
you can do is eval:
eval($scope.script.content)
but there is a problem your webpage get overridden by the eval code.
the best way is to open a new tab, get the reference of opener property.
var newWindow = window.open();
newWindow.opener.window.eval($scope.script.content);
Solved using:
var myWindow = window.open("http://pdf.test/input.html");
myWindow.document.write($scope.script);
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
i am new in angular.js and i am following a tutorial that was made about a year ago
i am trying to create a search function that takes the input and search for it in
Github.com
The HTML code is :
<!DOCTYPE html>
<html ng-app="github">
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="main">
<h1>{{message}}</h1>
<p> {{username}} </p>
<form name="search">
<input type="search" placeholder="enter name" ng-model="username">
<button type="submit" ng-click="search(username)">search</button>
</form>
<div>
<h1> {{user.login}} </h1>
<img src="http://www.gravatar.com/avatar/{{user.gravatar_id}}">
<p> {{user.type}} </p>
</div>
</body>
</html>
and the JS code :
// Code goes here
(function () {
var app = angular.module("github", []);
var main = function ($scope, $http) {
var onComplete = function (response) {
$scope.user = response.data;
};
var onError = function (reasone) {
$scope.error = "no can";
};
$scope.search = function (username) {
$http.get("http://api.github.com/users/" +username).then(onComplete, onError);
};
$scope.message = "Git hub viewer";
};
app.controller("main", ["$scope", "$http", main]);
}());
this gives me an error >>> TypeError: v2.search is not a function <<<
for help:
i got a problem like that and the solution was not to use "main" function in global type but "search" is not global i guess .. hope this help
here is the codepen link:
http://codepen.io/ToBeM12/pen/vGvwzo
the function has the same name as another variable and is conflicting in $scope
In your case just replace $scope.search to $scope.searchuser since $scope.search is already defined..
I've seen issues where the form name is the same as a scope function or variable name. Try renaming the form to "searchForm" to avoid the conflict with $scope.search.
An easy solution change the form name your form name is interfering with the function name
AngularJS error: TypeError: v2.login is not a function
The above is a similar question which helped me solve the question.
Try this
angular.module('github',[])
.controller('main', ['$scope', '$http', function($scope, $http) {
$scope.message = "Git hub viewer";
$scope.search = function (username) {
$http.get("http://api.github.com/users/" +username).then(function(response){
$scope.user = response.data;
});
};
}])
Dont do it
$scope.example = () => {
$scope.example = 'object';
}
Possible solution: the IIFE is written wrong.
(function(){...}());
instead of
(function(){...})();
For now, this is the only error that I could find.
#Integrator wrote correct answer. Just want to add to access to the form from your angular controller you also need to write $scope.formName. For example:
$scope.search.username.$invalid = true;
In this way you set form element to invalid. So in your case angular confuse form with method. It is a good practice to set form name like: xxxxForm to avoid such a conflicts
I know this has already been answered, but I also had the same error. It ended up being that I had type="submit" on my button with an ng-click. When I removed type="submit," the function worked fine and I no longer got the error.
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>