I started working with angular about 2 days ago. I'm still wrapping my head around how to do many things. Right now, I am trying to have a tooltip appear with the information pertaining the clicked "tag". I defined a "tag" as a <span> element with a ng-toolkitlike so:
<div id="list-of-words" ng-controller="inlineEditorController" ng-click="hideTooltip()">
<!-- This is the tooltip. It is shown only when the showtooltip variable is truthful -->
<div id="tooltip" class="tooltip" ng-click="$event.stopPropagation()" ng-show="showtooltip">
<input type="text" ng-model="value" />
</div>
<div ng-repeat="w in words">
<span class="tag" ng-click="toggleTooltip($event)">{{w.content}}</span>
</div>
</div>
my controller is as such:
var app = angular.module('myApp', []);
app.controller('inlineEditorController', ['$scope', function($scope){
$scope.inlineEditor = function(){
$scope.showtooltip = false;
$scope.value = 'Edit me.';
$scope.hideTooltip = function(){
$scope.showtooltip = false;
}
$scope.toggleTooltip = function(e){
e.stopPropagation();
$scope.showtooltip = !$scope.showtooltip;
}
};
})]);
what I'm attempting to do is to change the 'Edit me.' to display the content from {{w.content}} but I have no idea how to do this. Everything I've tried so far has failed.
To get item content you can use:
<span class="tag" ng-click="toggleTooltip($event,w.content)">{{w.content}}</span>
So, controller should be:
$scope.toggleTooltip = function(e,content){
e.stopPropagation();
$scope.showtooltip = !$scope.showtooltip;
$scope.value = content;
}
You can use $event.currentTarget to get the element. i.e. e.currentTarget in your controller.
Related
I'm trying to display a link <a href> when a condition is met, but the link never appears.
I have already tried to change the position (in/out of <div controller>) and the tag of the item containing the ng-if (span, div, ul...). This kind of code works on another HTML I have, so my Angular version seems okay.
Here is the form where I call the controller:
<div ng-controller="userRole">
<form ng-submit="setProfile()">
<select ng-model="userRole"
ng-options="role for role in roles">Role</select>
<input type="text"
ng-model="userName"
placeholder="Nom"></input>
<input type="submit"
value="Valider"></input>
</form>
</div>
The condition right after:
<span ng-if="user.isSetup">
Accès aux cours
</span>
And the actual controller:
var app = angular.module('srsApp', []);
app.controller('userRole', function($scope) {
$scope.roles = ['Professeur', 'Élève'];
$scope.user = {role:'', name:'', isSetup: false};
$scope.setProfile = function() {
if ($scope.userName !== '' && $scope.userRole !== '') {
$scope.user.role = $scope.userRole;
$scope.user.role = $scope.userName;
$scope.user.isSetup = true;
$scope.userRole = '';
$scope.userName = '';
}
};
});
</script>
I expected the link to appear once I submit the form with a role and a name, but the link stays hidden. No error from my Firefox terminal, and I know it enters the function because the placeholders are re-initialized.
As mentionned by #AnuragSrivastava, the <span> should be in the <div ng-controller="userRole">. As I said I tried it, but previous circumstances (syntax errors NOT highlighted by terminal) prevented this to work.
I have a form field (input text) with an ng-if being false at the begining. At some point the ng-if value become true.
When this happen, I want to execute some javascript which manipulate the DOM. To keep it simple, let's say that I need to select the input value and focus the field.
<input type="text" ng-value="foo" ng-if="show" onshow="doSomething()"/>
<button ng-click="toggle()"></button>
The JavaScript
ctrl.foo = "bar";
ctrl.show = false;
ctrl.toggle = function(){
ctrl.show = !ctrl.show;
}
I know that it looks like a "non-angular approach", but here I think the action is not model related.
Since the ng-if directive execute the template each time show become true, you can use ng-init for that. See the following snippet and replace alert('test); by anything you want.
angular.module('test', []).controller('test', function($scope, $element) {
$scope.show = false;
$scope.toggle = function() {
$scope.show = !$scope.show;
};
$scope.init = function() {
alert($element.find('input').val());
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="test">
<input type="text" value="foo" ng-if="show" ng-init="init()" />
<button ng-click="toggle()">Toggle</button>
</div>
</div>
Have two different divs that can be toggled open and closed in Angualar app but trying to make sure that if one is opened that the other one closes. Seems like this should be simple enough in NG but still new to Angular. Anyone have any pointers?
Made an example fiddle here:
JS Fiddle
Here is the sample:
<body ng-app="simpleToggle">
<div ng-controller="AppCtrl">
<button ng-click="toggleCustom1()">Custom</button>
<span ng-hide="custom1">
<h2>Custom 1 is showing but Custom 2 should not be if it was already opened</h2>
</span>
<span ng-show="custom1"></span>
</div>
<div ng-controller="App2Ctrl">
<button ng-click="toggleCustom2()">Custom2</button>
<span ng-hide="custom2">
<h2>Custom 2 is showing but Custom 1 should not be if it was already opened.</h2>
</span>
<span ng-show="custom2"></span>
</div>
</body>
angular.module('simpleToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.custom1 = true;
$scope.toggleCustom1 = function() {
$scope.custom1 = $scope.custom1 === false ? true: false;
};
}])
.controller('App2Ctrl',['$scope', function($scope){
$scope.custom2 = true;
$scope.toggleCustom2 = function() {
$scope.custom2 = $scope.custom2 === false ? true: false;
};
}]);
Here you are dealing with the scope hierarchy, you wil want to use one of the mechanisms to coordinate between controllers. Some options are:
Using the $rootScope
Using messages
I have updated your example to use $rootScope here http://jsfiddle.net/4q7hrpc5/3/
firstly, create something to initialize the $rootScope. I created an outer controller and wrapped the two other controllers in that controller. Here is the updated HTML:
<body ng-app="simpleToggle">
<div ng-controller="OuterCtrl">
<div ng-controller="AppCtrl">
<button ng-click="toggleCustom1()">Custom</button>
<span ng-hide="!custom1">
<h2>Custom 1 is showing but Custom 2 should not be if it was already opened</h2>
</span>
</div>
<div ng-controller="App2Ctrl">
<button ng-click="toggleCustom2()">Custom2</button>
<span ng-hide="!custom2">
<h2>Custom 2 is showing but Custom 1 should not be if it was already opened.</h2>
</span>
</div>
</div>
</body>
here is the code for the controllers:
angular.module('simpleToggle', [])
.controller('OuterCtrl', ['$rootScope', function($rootScope) {
$rootScope.custom1 = false;
$rootScope.custom2 = false;
}])
.controller('AppCtrl',['$rootScope', '$scope', function($rootScope, $scope){
$scope.toggleCustom1 = function() {
$rootScope.custom1 = !$rootScope.custom1;
$rootScope.custom2 = false;
};
}])
.controller('App2Ctrl',['$rootScope', '$scope', function($rootScope, $scope){
$scope.toggleCustom2 = function() {
$rootScope.custom2 = !$rootScope.custom2;
$rootScope.custom1 = false;
};
}]);
Now this specific technique only works well for a small number of things that have to be coordinated. Messages or a service might be better if you have a large number of these things that need to be coordinated. Another alternative would be to put them all into the same controller.
It is a good practice for handling DOM Stuffs using directive. I use .next() for getting the next span. or you can use other selector for getting it.
documentation for elem: https://docs.angularjs.org/api/ng/function/angular.element
working here here
html:
<body ng-controller="MainCtrl">
<div>
<button change-toggle>Custom</button>
<span id="span1" class="toggle-show-css">
<h2>Custom 1 is showing but Custom 2 should not be if it was already opened</h2>
</span>
</div>
<div>
<button change-toggle>Custom2</button>
<span id="span2" class="toggle-show-css">
<h2>Custom 2 is showing but Custom 1 should not be if it was already opened.</h2>
</span>
</div>
</body>
css
.toggle-hide-css {
visibility: hidden;
}
.toggle-show-css {
visibility: visible;
}
directive
app.directive('changeToggle', ['$location', function($location) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
elem.bind('click', function(event) {
var spanner = elem.next();
if(spanner.hasClass("toggle-show-css")) {
elem.parent().parent().find('span').removeClass("toggle-show-css");
elem.parent().parent().find('span').addClass("toggle-hide-css");
spanner.removeClass("toggle-show-css");
spanner.addClass("toggle-hide-css");
} else {
elem.parent().parent().find('span').removeClass("toggle-show-css");
elem.parent().parent().find('span').addClass("toggle-hide-css");
spanner.removeClass("toggle-hide-css");
spanner.addClass("toggle-show-css");
}
});
}
}
}]);
I am doing a functionality of selecting an image from the image list. I have a button "select" from every button and call selectImage method on button-click.
AngularApp:
app = angular.module("BlogImageApp", []);
app.controller("BlogImageController", function($http, $scope){
$scope.selectedImageId = null;
$scope.selectedImageUrl = "";
$scope.selectImage = function(image_id) {
$scope.selectedImageId = image_id;
var params = 'id='+image_id;
$http.get('/blog/image/get-url-by-id?'+params).success(function(data){
$scope.selectedImageUrl = data;
});
}
});
// registers the BlogImageApp in the view
angular.bootstrap(document, ['BlogImageApp']);
The view:
<div id="blog-images" ng-controller="BlogImageController">
<div ng-show="selectedImageId == null" style="height:50px; margin-bottom:5px;">
<div class="alert alert-info">
<span class="glyphicon glyphicon-info-sign"></span>
The image isn't selected!
</div>
</div>
<div class="blog-selected-image" ng-hide="selectedImageUrl == ''">
<b>The selected image: <span ng-bind="selectedImageUrl"></span> </b><br/>
<img ng-src="{{selectedImageUrl}}" class="img-thumbnail" style="height:200px">
</div>
...
PJAX PART GOES HERE WITH GRID AND PAGINATION
and button with ng-click="selectImage(39)" for every item
PJAX PART ENDS
And after all in javascript:
var ngRefresh = function() {
var scope = angular.element(document.body).scope();
var compile = angular.element(document.body).injector().get('$compile');
compile($(document.body).contents())(scope);
scope.$apply();
}
// PJAX
$(document.body).on('pjax:success', function(e){
ngRefresh();
});
After pjax call I have some strange behaviour. When I click a select button, selectImage method is invoked. It changes selectedIMageUrl and I can see different url in span every time I click select button. But the image (where ng-src specified) doesn't change.
Image changing worked great before pjax call though.
PS: I understand, that it would be better to do jsFiddle snippet, but I would have problem with server side.
Trivial to most
Ok so I have this div that I want to bind some values into AFTER the ng-if has been set to true and AFTER the ng-init has been called.. at this point my ng-init is getting called but the message isnt binding. I might have the wrong tags on but you get what I mean.. i want the function to be called after my statement becomes true.
<div ng-repeat="field in model.fieldData">
<button class="btn-xs" ng-show="!isLocked(field.Id)" ng-click="openField(field)">
Edit
</button>
<div ng-if="isLocked(field.Id)" ng-init="msg = getLockMessage(field.Id)" ng-bind="msg">
</div>
</div>
Look this plunker:
plunker
Is a little example based on your html, and works. Make a little changes the element msg change inside the element parent, because if exist a lot of fieldData then the same variable is replaced.
The JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.model = {
fieldData: [{
Id: 123,
locked: false,
}]
};
$scope.isLocked = function(element) {
return element.locked;
}
$scope.openField = function(element) {
element.locked = true;
}
$scope.getLockMessage = function(element) {
return "message from " + element.Id
}
});
And the html:
<div ng-repeat="field in model.fieldData">
<button class="btn-xs" ng-show="!isLocked(field)" ng-click="openField(field)">
Edit
</button>
<div ng-if="isLocked(field)" ng-init="field.msg = getLockMessage(field)" ng- bind="field.msg">
</div>
</div>