If I want only 20 iteration, how can I repeat my block?
It isnt work:
<div ng-repeat="item in _.range(20)"></div>
UnderscoreJS included in the page
If you want to use undersore's functions in your template you will have to expose it on a scope. If you want to have it available in all templates one way of doing so would be:
var app = angular.module('angularjs-starter', []);
app.run(function($rootScope){
$rootScope._ = _;
});
Then you could use it in a template as you've tried:
<div ng-repeat="item in _.range(20)">{{item}}</div>
Here is a working plunk: http://plnkr.co/edit/1Va4EikvRyFiQvhb2HYV?p=preview
While the above works it shouldn't be used. Model should be initialized in a controller. Otherwise AngularJS will execute _range on each $digest cycle to generate a new array.
Related
I thought there was a way that I can just display something on the page and not have AngularJS check it for changes.
Can someone tell me how to do this? Is it just if I have a label like this:
{{ abc }}
You may use binding like this {{::abc}} so you app will not watch for changes after first render of the data. See one-time-binding doc
It is a scope variable. Means your controller has an scope object as $scope if you define any variable like $scope.abc = "string". then a new property called abc will be created in your controller scope.
In AngularJS scope object was always watched and once any change in that object made it will reflect in the view.
Thankfully, Angular 1.3 and up versions has put a lot of effort into performance with the feature One-time binding using {{ ::abc }} works:
angular
.module('MyApp', [])
.controller('MyController', function($scope, $timeout) {
$scope.abc = 'Some text'
$timeout(function() {
$scope.abc = 'new value';
console.log('Changed but not reflected in the view:', $scope.abc);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<p>{{ ::abc }}</p>
</div>
As there is a two-way data binding, angular will watch for any changes on the variable $scope.abc and update the DOM with the changes. However if you want to make sure it does not watch for any changes you can go for the one-way binding, where any change made to the variable will not be watched upon by angular. You can do this using by {{::abc}} or ng-bind="::abc".
For example refer - https://jsfiddle.net/m8L2pogg/
I got a variable in my angularjs scope like this:
function MyCtrl($scope) {
$scope.myvar = "{{'i want to translate this' |translate}}" + "{{' and this' |translate}}" + " but not this" ;
}
The translate is a custom filter which translates to french.
In the html:
{{myvar}}
I want to display "myvar" in the html but it displays the '{{' & '}}'.
I made a jsfiddle here
As per your jsfiddle code:
<div ng-controller="MyCtrl">
{{myvar}}
</div>
You've not used ng-app="myApp" directive anywhere. So angular know that which part of the HTML it need to bootstrap as angular app.
Another thing, you must avoid using global functions as controllers. Instead use
angular.module("myApp", [])
.controller("MyCtrl", MyCtrl);
Still you can't have
{{'i want to translate this' |translate}}" + "{{' and this' |translate}}
in your controller. instead you must use $filter and do the filtering in controller and just return the string.
$scope.myVar = $filer("translate")("i want to translate this") + $filer("translate")(" and this");
Inject $filter to your controller.
So, to start I have added some code to your jsfiddle and got it working. It renders your myvar.
var myApp = angular.module('myApp',['controllers']);
var controllers = angular.module('controllers', []);
controllers.controller('MyCtrl', ['$scope', function ($scope) {
$scope.myvar = "{{'i want to translate this' |translate}}" + "{{' and this' |translate}}" ;
}]);
Also see jsfiddle.
You can find a "working" fiddle based on the good advice from #mohamedrias here. By "working" I mean ng-app is properly declared in the html and your bindings are working. I agree with the advice already shared. Apply your filter logic within the controller. Then you could set the result to something like vm.myTranslatedVar and bind to that in your html with {{ vm.myTranslatedVar }}. vm simply stands for "view model" and sets your controller's scope rather than using $scope.
What I am trying to do is after clicking on a buddy in the buddy list, load a chat dialog template HTML file without disturbing other elements in current DOM just like chatting in facebook.
My problem is that after loading the html template file the scope variables such as {{contact.jid}} are not properly rendered, and the controller for the dialog is not even called.
How can I force a rerender or a call on the controller so that those variables are properly renderred? Or should I not use the jQuery.load function to do this? I can't figure out any other way.
Thank you.
Code of the controllers:
// Controller for the chat dialog
ctrl.controller('ChatCtrl',function($scope){
$scope.test = "Test"
});
// Controller for the buddy list
// $scope.toggleDialog is called when a buddy is clicked
ctrl.controller('ContactCtrl',function($scope){
$scope.contacts = window.contactList;
$scope.toggleDialog = function(to){
$.("#chatarea").load("chatdialog.html")
};
});
The controller function of chat dialog is not called after loading chatdialog.html which has an attribute of ng-controller, so the {{test}} variable is not set.
You need to wrap your content that will be compiled inside a directive.
This directive receives the variables and the HTML that will be compiled.
You can wrap this directive in the element that you like:
http://plnkr.co/edit/RYVCrlDmgVXT3LszQ9vn?p=preview
For example, given the following html and variables:
// In the controller
$scope.controllerHtml = '<span>{{variables.myVariable}}</span>';
$scope.controllerVariables = {myVariable: 'hello world'};
<!--In the HTML-->
<div compile-me html-to-bind="controllerHtml" variables="controllerVariables"></div>
You will get the following:
<div>
<span>hello world</span>
</div>
You are loading the external HTML via jQuery and Angular has no way of knowing how to use it. There are two ways to solve this issue:
use ngInclude to load the template from the server, angular will load it from the server and compile it for you to use.
continue to use jQuery load the HTML from the server and use the $compile service to teach angular how to use it
I would highly suggest using method #1 to load your external template.
I suppose the:
$.("#chatarea").load("chatdialog.html")
is the jQuery .load, or something similar. I would get the template via ngInclude, checking if test is setted or not; html:
<div id="chatarea" ng-if="test">
<div ng-include="'chatdialog.html'"/>
</div>
controller:
ctrl.controller('ContactCtrl',function($scope){
$scope.contacts = window.contactList;
$scope.test = '';
var callbackFunction = function(data) {
$scope.test = data.test;
};
$scope.toggleDialog = function(to){
AjaxRequestToGetBuddyInfoAndMessages(to, callbackFunction);
};
});
Obviously test will be a more complex object, so the ngIf test will be different (and you will need to take into account the fact that:
$scope.test = data.test
if they are objects, they will lose the reference and have an unwanted behaviour).
I am new to Angular getting stuck after making ajax call. How do I render/compile the html content once you inject in DOM so that I can still use the AngularJs functions.
Due to the way my backend is set up I have to get content via ajax ($http). And I am making the app without jQuery. I tried $compile and $apply but didn't work. What am I missing here.
I have the code set up at http://jsfiddle.net/rexonms/RB7FQ/3/ . I want the second div content to have the same properties as the first div.
HTML
<div ng-controller="MyCtrl" class="section">
<input ng-model="contentA">
<div>
And the input is: {{contentA}}
</div>
</div>
<div ng-controller="MyAjax" class="section">
<div id="dumpAjax">
{{ajaxData}}
</div>
<button ng-click=getajax()> Get Ajax</button>
</div>
SCRIPT
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
}
function MyAjax($scope){
var data = '<input ng-model="contentB">{{contentB}}';
$scope.getajax = function(){
$scope.ajaxData = data;
}
}
Thanks in advance.
ng-bind-html-unsafe is not available 1.2 and later verison of angular...
so you should use ng-bind-html which creates a binding that will innerHTML the result of evaluating the expression into the current element in a secure way.
using $scope variable in your string make it unsafe, so you should use $sce.trustAsHtml but this time variables in your string cannot be bind because they will be not compiled...
basically you should compile your string in order to bind your variables. Here comes custom directives you can create a directive which can replace with ng-html-bind...
Writing a custom directive which extends ng-bind-html with some extra functions can be a solution...
here is my PLUNKER
and here is your updated JSFIDDLE with my solution...
Instead of {{ajaxData}}, you should use something like:
<div ng-bind-html-unsafe="ajaxData"></div>
However, you'd still need to set the proper model to bind the contentB and get it working.
Is there a way in angular to get binding back from a template?
In other words, if I have something like this:
<div ng-repeat="item in list">
<div>{{item.name}}</div>
<div>{{item.state}}</div>
</div>
would it be possible to change the item's state by clicking on it, because the repeated div would "remember" what item it was built from?
Yes, you can use the ng-click directive to trigger a method on the current scope:
// In your view's controller:
function MyCtrl($scope, MyList) {
// You probably have something like that already to
// populate your list, using a $resource or $http GET call.
// Here I use a $resource which would be defined on your module.
$scope.list = MyList.query()
$scope.setState = function(state) {
// "this" refers to the current scope
this.item.state = state
}
}
// And in your view:
<div ng-repeat="item in list">
<div>{{item.name}}</div>
<div ng-click="setState('whatever')">{{item.state}}</div>
</div>
Or you can simply set an expression such as ng-click="item.state='whatever'" directly on the div, although this is less testable - only in end-to-end tests - and less flexible, say you want to introduce validation or something).
HTH