i have written angular js expression in razor for html helper but when i refresh the page after loading once it shows the expression, that is irritating.. what is the problem
here is the code
#Html.EditorFor(model => model.Questions.Question, new { htmlAttributes = new { ng_model = "quest" } })
{{quest}}
Instead of using curly binding expressions, you can use ngBind:
<span ng-bind="quest"></span>
Or you can use ngCloak:
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
<body ng-app="" ng-controller="ctrl" ng-cloak>
{{ quest }}
</body>
Related
I am new in AngularJS.
I am fetching data from the Rest API and displaying it on the page.
My Supposed code is giving below.
$http.get(local_url+'/data').
then(function(response) {
$scope.data = response.data.client_data;
});
Now when suppose I write.
<p>{{ data.name }}</p>
So when i come on page, it is showing above {{ data.name }} code after sometime it is showing any name.
=============================================================
Solution.
I used in body tag like that. <body ng-cloak> It will work.
thanks.
What you could do is define the $scope.data before the $http as an empty string
$scope.data = "";
You also could use the build in ngCloak directive. This will prevent AngularJS from displaying the $scope in its raw form.
You can find more info about it inside the AngularJS docs here
Another option would be to use the ng-if or ng-show expression, to check whether a value isset or not before rendering the element.
<p ng-if="data.name">{{data.name}}</p>
or
<p ng-show="data.name">{{data.name}}</p>
Where ng-if clones the element and appends it to the document when the expression is true and ng-show just toggles a display: none; or display: block; state on the element.
Helpfull Links:
ng-if documentation
ng-show documentation
I am using AngularJS v1.4.8
when i try to display that field with ng-bing-html, whole page content overwrite.
for example
<script>
document.write("hello");
</script>
url start infinite loading instead of ng-bind-html tag.
The write() method writes HTML expressions or JavaScript code to a document and it will delete all existing HTML.
The ng-bind-html directive is a secure way of binding content to an HTML element.
Refer to the ng-bind-html in following document.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
I have this scenario, I am loading part of HTML (which has AngularJS directives) dynamically via script and I see AngularJS is not getting activated.
here is the example I am looking at. Is there anyway I can tell AngularJS to start bind on document ready? Loading an aspx page containing this widget1 content via a iframe seems to work but I am trying to avoid iframe and use client side script.
Appreciate any help.
<body ng-app>
main content page
<br />
<!-- widget1 -->
<b>Widget1</b>
<div id="widget1">
<!-- load below div via jquery/or any method from a remote html file-->
<script type="text/javascript">
$("div#widget1").load("/widgetsfolder/widget1.htm");
</script>
</div>
widget.htm file has below content.
<div ng-controller="TodoCtrl">
Total todo items: {{getTotalItems()}}
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" />
<span class="done-{{todo.done}}">{{todo.text}} </span></li>
</ul>
</div>
my controller code below.
`function TodoCtrl($scope) {
$scope.totalItems = 4;
debugger;
$scope.todos = [{
text: 'learn angularjs',
done: false
}, {
text: 'implement angularjs',
done: false
}, {
text: 'something else',
done: false
}, ];
$scope.getTotalItems = function () {
return $scope.todos.length;
}
}`
sample code here
http://jsfiddle.net/devs/RGfp4/
Apero's answer describes what is going on. I believe you are going to want to use ng-include. Your html would look something like this:
<body ng-app>
main content page
<br />
<!-- widget1 -->
<b>Widget1</b>
<div ng-include="'/widgetsfolder/widget1.htm'">
</div>
</body>
AngularJS evaluates the scope and renders the page after it is loaded.
Here, your js script loads the widget html but after Angular already compiled the scope etc.
I believe this will not work this way.
You can use angulars ngINclude to fetch outside documents, but I don't suggest it, it can be buggy. You can get the partials using either $http or $resource, this will fetch the data and compile the angular directives inside.
If you want to load the script using some other method, you can store the data as a string inside the controller and use a $compile directive in order to execute the angular code inside it.
I have 3 questions
can i use angular js with kendoUi wrappers? if yes how?
if i am using angular js and kendo-all.min.js on the same html tag let say that we are converting an input tag to auto-complete and at the same time we are binding it with ng-model then what possible affect they can produce in each other?
what actually angular-kendo is?
code for Point No-2
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/Kendo/kendo.all.min.js"></script>
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/app.js"></script>*#
<script type="text/javascript">
$(document).ready(function () {
var data = ["akshay", "tiwari", "ranjit", "swain"];
$("#name").kendoAutoComplete({ dataSource: data });
})
</script>
<h2>KendoAngular</h2>
<div ng-app>
<input id="name" type ="text" ng-model="yourName"/>
<h2>{{yourName}}</h2>
</div>
There is a kendo project that you'll need to include: https://github.com/kendo-labs/angular-kendo
What will happen is that as the user types in say an autocomplete, the selection will be bound to an angular scope item. The "wrapper" is what makes all the bindings and allow angular to be updated.
From the github: angular-kendo is a directive for AngularJS that runs an element through Kendo UI declarative initialization, allowing you to take full advantage of Kendo UI within the context of an AngularJS Application.
You plunker is not including the angular adapter located at the link above.
Here are the instructions for its use: http://kendo-labs.github.io/angular-kendo/#/simple
var app = angular.module('your-angular-app', ["kendo.directives"]); // include directives
Add data-kendo and appropriate data- attributes.
AddThis button is not showing in my backbone.js template.
I have the following code in my backbone.js template file:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook sharebtn"></a>
<a class="addthis_button_twitter sharebtn"></a>
<a class="addthis_button_preferred_4 sharebtn"></a>
</div>
and I put the following in the header file.
<script type='text/javascript' src="https://s7.addthis.com/js/300/addthis_widget.js"></script>
The header file is rendered using django templates.
What can I do?
Edit:
I tried putting this in the backbone template:
<div id = "toolbox"></div>
and then putting this at the end of the render function in the backbone view:
tbx = that.$el.find("div#toolbox"),
svcs = {email: 'Email', print: 'Print', facebook: 'Facebook',
expanded: 'More'};
for (var s in svcs) {
tbx.innerHTML += '<a class="addthis_button_'+s+'">'+svcs[s]+'</a>';
}
addthis.toolbox(document.getElementById('toolbox'));
But addthis is still not rendering.
The AddThis plugin script parse the HTML at the moment it is loaded. Your template is loaded asynchronously, as so, AddThis isn't finding the relevant markup to render the buttons.
What you need to do, is to call the AddThis rendering function once your template have been render to screen.
Checkout Render with javascript section of their doc: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api