I need to surround a bound data value with square brackets so it will display as follows:
[somevalue]
Which I have done like so:
[<span ng-bind="person.id"></span>]
I can do this fine but I am running into an issue when I attempt to apply this to a dive which has a bound value, eg:
<div ng-bind-html="anotherValue | trustAsHtml"></div>
I want the [somevalue] to appear within the anotherValue div, but when I try the following code the second value isn't displayed:
<div ng-bind-html="anotherValue | trustAsHtml"> [<span ng-bind="person.id"></span>]</div>
I'm new to angularjs so I'm probably doing something completely stupid, my apologies if that is the case, thanks.
You can do it the way you are trying like so:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce) {
$scope.person = {id: 2}
$scope.anotherValue =
$sce.trustAsHtml('Hi[<span>'+$scope.person.id+'</span>]');
});
And in the markup:
<div ng-bind-html="anotherValue"></div>
ng-bind-html replaces the inner-html of an element. So in this case the anotherValue would overwrite the person.id. If you move the inner span out the div it will become visible again
Related
I have a json object
"blog1":{
"blogid":"1",
"body":"sometext"
"IMG":"URL of image"
}
I am trying to access this objects IMG element to set as background IMG for div using ng-style as below
<Div ng-controller="controller as ctrl">
<div ng-style="background-image:URL('{{ctrl.object.blog{{ctrl.blogId}}.IMG}}');" >
My controller looks like (rough )
App.controller('controller', function (){
this.object= $firebaseObject();
this.blogId= $routeParams.blogId;
});
Notice that div with ng-style contains nested angular expression , and they do not evaluate. Is there any other solution to achieve this.
Note: this is single page application, so according to blog id in the URL ,I wanna display image . I'm using angular routing for SPA.
To use a variable as index you do as follow
Controller:
$scope.myVar = 'something';
$scope.myObj = {something: {img: 'something else'}};
View:
{{myObj[myVar].img}}
In your case:
{{ctrl.object.blog[ctrl.blogId].IMG}}
I am trying to organize my (elsewhere defined) variables in an array, but this breaks the two-way-binding. I don't understand why I can bind to a variable directly, but not indirectly. I guess this is some stupid mistake.
Example here (jsfiddle) or below:
Html:
<div ng-controller="MyCtrl">
<input ng-model="test1"></input>
<input ng-model="test2[0]"></input>
<p>{{test1}}</p>
</div>
Javascript:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.test1 = 'text goes here';
$scope.test2 = [$scope.test1];
}
As you can see the first input is bound to the variable and updates it correctly, while the second one takes the initial value, but isn't bound.
It is working actually. See https://jsfiddle.net/ryekxkpL/2/
The $scope.test2[0] is a copy of $scope.test1, so it's the same as if you had $scope.test2 = ['text goes here']; Changing it won't effect $scope.test1.
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.
Have a template that I'd like to load using ng-include and assign a controller instance to. This new template/scope/controller needs to be loaded in response to a user interaction (hover or click).
The content of the template has to be set using element.innerHTML because the content is set by a 3rd party.
The user can then click out of the new div and I would like to destroy the controller/scope that was created.
Pseudocode for what I want to achieve:
popup.setContent("<div ng-controller='PopupController'><div ng-include=\"views/LayerPopup.html\"></div></div>");
How do I tell angular to process the ng-include and ng-controller just as though the page was being loaded for the first time?
Thanks!
Edit:
Add plunker to illustrate question
http://plnkr.co/edit/DPuURCoq2hJ0LCLIN2dc?p=preview
http://jsfiddle.net/ADukg/5420/
Not using ngInclude, but it does fill these criteria:
You pass in a templateURL.
Pass in the name of the controller you would like to use.
Pass in the third party content (which in turn gets set with $element.innerHTML).
Setup a click listener someplace outside the $scope of the popup, which triggers a kill command on the popup.
This is how I imagine you would instantiate it:
<directive tpl="tpl.html"
ctrl="DirectiveController"
third-party-content="{{thirdPartyContent}}">
</directive>
Not sure this will suit you, but I had a fun time putting it together and maybe it'll prove useful to someone else.
In any case, I have to agree with the comments you've recieved so far. It's a bit cryptic as to what you have to work with right now and what possible options are available to you.
Here is a plunker of what you are trying to do. If you click on a button, a popup will show a template, and you can click on the template and it will stay up, but if you click out of it, it will get removed.
HTML
<body ng-controller="MainCtrl" ng-click="closePopup()">
<button ng-click="openPopup($event)" id="clicktarget">Click</button>
<p>Hello {{name}}!</p>
<div ng-include="getPopup()" ng-click="$event.stopPropagation()">
</div>
<script type="text/ng-template" id="theTemplate.html">
<div ng-controller="PopupController">
<div ng-include="'LayerPopup.html'"></div>
</div>
</script>
</body>
JS
angular.module('plunker', [])
.controller('MainCtrl', function($scope, $templateCache) {
$scope.name = 'World';
$scope.popupTmpl = null;
$scope.openPopup = function($event){
$scope.popupTmpl = 'theTemplate.html';
$event.stopPropagation();
};
$scope.getPopup = function(){
return $scope.popupTmpl;
};
$scope.closePopup = function(){
$scope.popupTmpl = null;
};
})
.controller('PopupController', ['$scope', function($scope) {
$scope.aVariableMaybe = 'lulz something';
}]);
On a side note, try to get rid of that JQuery stuff when you are using Angular. Angular can do everything on its own
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.