I'm trying to simply change the button text with a toggle but I'm failing to do so I don't know why.The button only shows 'ver fotos' and doesnt change to my 2nd option. Maybe i can't put two ng-click like that? This is my code:
angular.module('app.controllers', [])
.controller('perfilCtrl', ['$scope', '$stateParams', "detailService",// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, detailService) {
$scope.detalhes=detailService.data;
$scope.goEsconder = false;
$scope.toggle = true;
$scope.$watch('toggle', function(){
$scope.toggleText = $scope.toggle ? 'Ver fotos' : 'Ver características';
})
}])
<ion-view id="page4">
<ion-content padding="true" class="backg">
<div class="row">
<div class="col">
<h3 class="name">{{detalhes[0]}}</h3>
</div>
</div>
<div class="row">
<div class="col">
<p class="descricao">{{detalhes[2]}}</p>
</div>
</div>
<div class="row">
<div class="col text-center" ui-sref="contacto"><button class="button b2">
Contactar
</button>
</div>
<div class="col text-center"><button class="button b3" ng-click="goEsconder = !goEsconder; toggle = !toggle">
{{toggleText}}
</button>
</div>
</div>
</ion-content>
</ion-view>
Use an object so that child scopes will use inheritance. There is no inheritance on primitives in javascript.
So what happens is you are only changing the primitive in the child scope and that change is hidden from the parent so the watch won't fire
$scope.myModel = { toggle: true };
$scope.$watch('myModel.toggle', function(nVal, oVal) {
$scope.toggleText = $scope.myModel.toggle ? 'Ver fotos' : 'Ver características';
});
HTML
<button class="button b3" ng-click="myModel.toggle = !myModel.toggle">
{{toggleText}}
</button>
DEMO
I believe it works fine: http://jsfiddle.net/Lvc0u55v/10594/
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.toggleText = 'click me'
$scope.toggle = true
$scope.$watch('toggle', function(){
$scope.toggleText = $scope.toggle ? 'Ver fotos' : 'Ver características';
})
}
Html:
<div ng-controller="MyCtrl">
<div class="col text-center">
<button class="button b3" ng-click="toggle = !toggle">{{toggleText}}</button>
</div>
</div>
Change your watcher to use the true parameter, this way:
$scope.$watch('toggle', function(toggle){
$scope.toggleText = toggle ? 'Ver fotos' : 'Ver características';
}, true)
this will make your code work because watchers doesn't work natively on boolean values (because boolean values are passed by value on javascript: for your watcher toggle is always true )
Specifying the true parameter, however, will change your watcher to a deep watcher, being so able to catch value changes and not only references changes.
Related
I am having an issue getting Angular Scroll to work.I am trying to scroll from the landing div to another section on the page with a button click. My code formatted really strangely, so let me know if further clarification is needed.
HTML
<div class="cover">
<div class="big-logo">
<i class="fa fa-trello"></i>
<span> My Kanban</span>
<br>
<button class="arrow" ng-click="bc.toLists()" du-smooth-scroll>
<i class="fa fa-angle-double-down fa-sm animated flash infinite" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="story-board content">
<button class="add-list" ng-click="bc.addingList = !bc.addingList">
Add List
</button>
<div ng-if="bc.addingList">
<form ng-submit="bc.addList(bc.newList)">
<input style="margin-left: 5px" ng-model="bc.newList.name"/>
<button type="submit">+</button>
</form>
</div>
<div class="list" ng-repeat="list in bc.lists">
<button style="font-size: 10px;background: none;border:none; color: black" ng-click="bc.removeList(list)">x</button>
<list-component list-obj="list"></list-component>
</div>
</div>
init.js
angular.module('kanban', ['duScroll'])
app.js
angular.module('kanban')
.component('boardComponent', {
templateUrl: 'app/components/board/board.html',
controller: BoardController,
controllerAs: 'bc'
})
BoardController.$inject = ['EsService']
function BoardController(EsService) {
var bc = this;
bc.lists = EsService.getLists();
bc.addingList = false;
bc.removeList = function(list){
EsService.removeList(list.id);
}
bc.addList = function(list){
EsService.createList(list);
bc.newList = {};
}
bc.toLists = function() {
bc.cover = angular.element(document.getElementsByClassName('cover'));
bc.content = angular.element(document.getElementsByClassName('content'));
bc.cover.scrollTo(bc.content, 0, 1000);
}
}
For a JQuery free answer, you can use $anchorScroll
Create your anchor link:
<button ng-click="$ctrl.scrollTo('anid')">Scroll</button>
Create the anchor to scroll to:
<div id="anid">Land here</div>
Then your controller:
controller: function($anchorScroll) {
this.scrollTo = function(id) {
$anchorScroll(id);
}
}
I would recommend letting your controller handle the scrolling as opposed to the directives. You will have much tighter control that way and can therefore debug any issues.
Here's an example using the scrollToElement method. Once you have this logic in place you can switch it out to any method you need.
Here's a working demo
angular
.module('app', ['duScroll'])
.component('cmpExample', {
templateUrl: 'path/to/template.html',
controller: function($document) {
var vm = this;
vm.scrollTo = function(id) {
$document
.scrollToElement(
angular.element(document.getElementById(id)), 0, 1000
);
}
}
});
html
<button ng-click="$ctrl.scrollTo('target')">
<div id="target">Content further down the page</div>
I am trying to pass some data with a function to display on a modal, yet the usual approaches to binding are not working, I was hoping someone could point me in the right direction.
$scope.openModal = function (obj) {
//$scope.data = {type: obj.type, descriptions: obj.description, isDone: obj.isDone, createDate: obj.createDate, priority: obj.priority};
$scope.data = obj;
console.log($scope.data);
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'modalTemplate.html',
controller: 'View1Ctrl',
resolve: {
data: function () {
return $scope.data;
}
}
});
}
Template
<!-- MODAL -->
<div>
<div ng-controller="View1Ctrl">
<script type="text/ng-template" id="modalTemplate.html">
<div class="modal-header">
<h3 class="modal-title">Item Details</h3>
</div>
<div class="modal-body">
<ul>
<li>Type: <span ng-model="data.type"></span></li>
<li>Description: <span ng-model="data.description"></span></li>
<li>Date: <span ng-model="data.createDate"></span></li>
<li>Priority: <span ng-model="data.priority"></span></li>
<li>Finished: <span ng-model="data.isDone"></span></li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close()">OK</button>
</div>
</script>
</div>
Also tried {{data.type}} etc, and ng-bind. I now my $scope.data is populated because it is showing as much in the console.
You should inject data (resolve object) into your modal controller then add it to the $scope object.
You should remove ng-controller="View1Ctrl" from template.
So have a modal with a two buttons on it. One to close the modal, and one that should fire a function when clicked. I've attached a controller to the modal, and the controller itself works, as it does a successful console.log(). The ng-click doesn't seem to fire the function though. I think I just need another set of eyes on this, and it is greatly appreciated.
HTML:
<div id="forwardCall" class="modal fade" ng-controller="CallCtrl as call">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Transfer Call</h4>
</div>
<!-- dialog body -->
<div class="modal-body">
<p>Select Person below</p>
<div id="transferSelection">
<?php echo $transferCallSelect; ?>
</div>
</div>
<!-- dialog buttons -->
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="call.hideControls()">Transfer Call</button></div>
</div>
</div>
</div>
Controller:
app.controller('CallCtrl', ['$scope', '$http', function($scope, $http){
console.log("Call Controller");
function hideControls(){
console.log("Controls Hidden");
var well = document.getElementById('callControls');
well.style.display = 'none';
}
}]);
If you are using controller as syntax, you are binding to this variable instead of $scope. Here is a good post talked about Controller As Syntax.
tymejv gave you a good suggestion. You have to binding the function to this when you are using controller as syntax. So that you can access the function or variable for this particular controller.
this.hideControls = function() { ... };
You can binding to function to the $scope as well:
$scope.hideControls = function() { ... };
controller.js
(function () {
'use strict';
angular
.module('app')
.controller('CallCtrl', CallCtrl);
CallCtrl.$inject = ['$scope', '$http'];
function CallCtrl($scope, $http) {
var vm = this;
console.log("Call Controller");
vm.well = true;
vm.hideControls = function () {
console.log("Controls Hidden");
//Do not to this! This is not jQuery
//var well = document.getElementById('callControls');
//well.style.display = 'none';
vm.well = false;
};
}
}());
index.html
<div id="forwardCall" class="modal fade" ng-controller="CallCtrl as call">
<div ng-show={{ call.well }}>Some content</div>
</div>
Here i trying to implement application in angular js. I have an minimize/maximize button for all child element and seprate minimize/maximize button to inside child element.
But when i click toggle minimize its minimize all all child element.
Problem is when i click toggleonce it also minimize all child element.
var dashboard = angular.module("dashboard",['ui.bootstrap']);
dashboard.controller('dash-control', ['$scope', function($scope) {
$scope.isHidden = false;
$scope.toggle = function(){
$scope.isHidden = !$scope.isHidden;
};
$scope.toggleonce= function()
{
if( this.isHidden === true)
this.isHidden = false;
else
this.isHidden = true;
};
}]);
VIEW:
<div class="contentpanel" ng-app="dashboard" ng-controller="dash-control as ctrl">
<button class="btn btn-white" type="button" ng-click="toggle()">
<i class="fa fa-minus-square"></i>
</button>
<div>
<a href="" class="tooltips" ng-click="toggleonce()" title="Minimize Panel">
<i class="fa fa-minus"></i>
</a>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 1</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
<div>
<a href="" class="tooltips" ng-click="toggleonce()" title="Minimize Panel">
<i class="fa fa-minus"></i>
</a>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 2</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
......
.....
.....
</div>
The variable $scope.isHidden is a controller level variable and by clicking toggleonce() you are changing the variable to true through out the page(since both the 'minimize panels' are in the scope of the controller. Thereby any ng-hide for isHidden will be hidden and thereby it is causing the global 'minimise'.
You have two options:
1) use separate variables for each Minimize panel and toggle the values of that variable when you click on the corresponding function. Also write the Panel level 'ng-hide's for its own variable.
2) write a isolated scope directive for all Minizable panels. And isolate its scope from the Controller. Now write a toggleonce function in the directive which changes the value of the Hidden variable within the directive's scope. You must use the following syntax while writing the directive:
.directive('minimizePanel', function() {
return {
scope: true,
};
You can watch this video for more inputs.
I am working with angular js for my dashboard. I have an over all minimize button to minimize all widget and then each widget have own minimize button. I done with following script its not working.
when i click widget minimize button its minimize all widget. but i want minimize that widget only.
var dashboard = angular.module("dashboard",['ui.bootstrap']);
dashboard.controller('dash-control', ['$scope', function($scope) {
$scope.isHidden = false;
$scope.toggle = function(){
$scope.isHidden = !$scope.isHidden;
};
$scope.toggleonce= function()
{
if( this.isHidden === true)
this.isHidden = false;
else
this.isHidden = true;
};
}]);
HTML code like follow:
<div class="contentpanel" ng-app="dashboard" ng-controller="dash-control as ctrl">
<button class="btn btn-white" type="button" ng-click="toggle()"><i class="fa fa-minus-square"> </i> </button>
<div>
<i class="fa fa-minus"></i>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 1</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
<div>
<i class="fa fa-minus"></i>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 2</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
......
.....
.....
</div>
I would rather create a directive with isolated scope for represent a inner widget. for instance;
dashboard.directive('myWidget',function(){
return {
scope:{},
template:"<div>\r\n<a href=\"\" class=\"tooltips\" ng-click=\"toggleonce()\" title=\"Minimize Panel\"><i class=\"fa fa-minus\"><\/i><\/a>\r\n<div class=\"row tinychart\" ng-show=\"isHidden\">asdasdasd<\/div>\r\n<div class=\"row tinychart\" ng-hide=\"isHidden\">sdasdasd<\/div>\r\n\r\n <\/div>",
link:function($scope)
{
$scope.isHidden = false;
$scope.toggle = function(){
$scope.isHidden = !$scope.isHidden;
};
$scope.togglesingle = function()
{
if( this.isHidden === true)
this.isHidden = false;
else
this.isHidden = true;
};
}
}
});
Then In Html Body;
<div class="contentpanel" ng-app="dashboard" >
<button class="btn btn-white" type="button" ng-click="toggle()"><i class="fa fa-minus-square"> </i> </button>
<div my-widget></div>
<div my-widget></div>
</div>
Note that I haven't run and check the example. I hope you got the idea.
Edited:
The ng-repeat will loop the array (list) and initiate each element to 'item' variable. You can pass that data to your directive. Check the updated code.