Pretty new to angular and having a little trouble getting data from controller and displaying in view using ionic.
I have a function in a controller ('DashCtrl') where I pass through a string to use within the function by using ng-click. For now I just want to take this string and display it in the next view as I have an href on the same element I have the ng-click event.
When I log the string on the next page, it is working and shows up. How do I get to use this in the view?
Heres the code:
HTML
*first page
<ul contentful-entries>
<div ng-repeat="story in $contentfulEntries.items">
<li class="story col col-100">
<a href="#/tab/story/{{story.fields.slug}}" ng-click='storyDetails("{{story.fields.title}}")'>
<p>{{ story.fields.title }}</p>
</a>
</li>
</div>
</ul>
*redirects to this on the ng-click
<ion-view view-title="Story">
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
<ion-content>
<ion-list ng-controller="DashCtrl">
<h1>{{ story.slug }} </h1>
<p> <!-- HERE IS WHERE I WANT TO DISPLAY THE STRING --> </p>
</ion-list>
</ion-content>
</ion-view>
*heres my controller
.controller('DashCtrl', function($scope, $stateParams, $ionicHistory) {
$scope.storyDetails = function($scope, details) {
// here is the data i need to display in the view
// the console.log shows up in the browser
console.log(details);
}
$scope.goBack = function(){
$ionicHistory.goBack();
}
// this is working fine
$scope.story = $stateParams;
})
Save the details string as a controller variable, and then you can access this within the view.
Assign variable details to some other variable like$scope.newVar = details and then in ur view you can display that by just binding it in this way {{newVar}}.
Hope you got it.
I ended up using the $rootScope. I know this may not be the best solution but I am just trying to grasp Angular at the moment.
In my controller I used
.controller('DashCtrl', function($scope, $stateParams, $rootScope, $ionicHistory) {
$scope.goBack = function(){
$ionicHistory.goBack();
}
$scope.storyDetails = function(details) {
$rootScope.details = details;
return $rootScope.details;
}
})
Then I am able to use the $rootScope.details in another controller to use in a function I need the string for.
I know I'm not doing this the Angular way, so if anyone would be kind enough to show me how to do this 'properly' without using the rootScope, I'd be forever in your debt.
Related
Basically I want to achieve like this scenario:
https://i.stack.imgur.com/LLTcK.png
My research led me to $compile, $trustAsHtml,at last directive.
In $compile and $trustAsHtml I can only append static template or only html but can't use dynamic things such ui-sref, ng-click etc.
So, I tried to create directive it is not working and also I am unable to add multiple template on click.
controller :
app.controller('Ctrl', ['$rootScope', '$scope',function ($rootScope, $scope)
{
$rootScope.enableDirective=false;
if(userHasOneApp){// checking some at least one app then only do action
$rootScope.appicon="img_url"; // data which i am passing
$rootScope.appname="App_name"; // data which i am passing
$rootScope.enableDirective=true;
}
}]);
custom directive:
app.directive('headerTemplate', function () {
return {
template:'<a ui-sref="/event" ng-click="editIt()">'
+'<img src="{{appicon}}"></a>'
+'<span>{{appname}}</span>',
scope:{
appname:'=',
appicon:'='
}
};
});
Header view :
<div> class="headerdiv">
<ul ng-if="enableDirective">
<li header-template appicon="appicon">
</li>
</ul>
</div>
Main view :
<div> class="maindiv">
<ui-view></ui-view> <!--basically I want to append template here -->
<button>Add next template</button>
</div>
Where I am doing wrong ?
Well i was facing the same issue
Check out the following link
This will surely help you.
I have implemented this and it worked in my scenario where i wanted to serve a directive when required i.e Lazy Loading of directive
https://www.codeproject.com/Articles/838402/Lazy-loading-directives-in-AngularJS-the-easy-way
I'm working on ionic+angularjs,
SITUATION
I have a list of items, each item redirects to a new page(form). after filling up the form and goes back to the list, the item will be indicated with a checkmark.
from the form, in order to go back to the list i used $ionicHistory.goBack()
QUESTION
how can i rerun a controller from the list of items, below is the code i used:
HTML:
<ion-nav-view>
<ion-content>
<div ng-controller="MyCtrl">
</div>
</ion-content>
</ion-nav-view>
JS:
.controller('MyCtrl', function($scope) {
console.log('View is shown');
})
Ionic emits events from the view's scope like $ionicView.enter, $ionicView.beforeEnter which could be helpful for you to re-run your controller logic when the user enters the view.
Documentation
I am having serious difficulties updating a view in Ionic/Angular when using ng-click.
I came across a similar issue earlier on but solved it following this guidance, which explains that if your button is inside a < label > ng-click will not work.
What am I trying to achieve?
I am developing a mobile application and want to allow a user edit their details if necessary. In an effort to start off most simply I have began by trying to implement the functionality whereby a user can edit their name. In the example below I am trying to change the name of the user when a button is clicked.
The strange thing is when I console.log(Photos.name) I get the correct value, i.e.(scope.user.name = "Jim") however the view does not reflect this change.
The code I have is as follows:
Controller
.controller('ProfileCtrl', function($scope, Photos) {
$scope.user = {
"name": Photos.name
}
$scope.changeName = function() {
Photos.changeName();
console.log(Photos.name)
};
})
Factory:
.factory('Photos', function(){
var o = {
name : 'James'
}
o.changeName = function(){
o.name = 'Jim'
}
return o;
});
HTML
Settings Template
This is where the button is that updates the user's name on the profile.html page(see below)
<ion-view view-title="Settings">
<ion-content>
<ion-list>
<div class="item item-input">
<span class="input-label">Change Profile Picture</span>
<button type="button" ng-click="changeName()">Add</button>
</div>
</ion-list>
</ion-content>
</ion-view>
Profile Template
<ion-view view-title="My Profile">
<ion-content class="padding">
<div class="item item-body">
<p class="profile-details">
{{user.name}}
</p>
</div>
</ion-content>
</ion-view>
I have read through many SO answers and those on the ionic webpage, with no luck. From what I have read I think that it may be something to do with setting the value in a child scope is the thing that is breaking it but I cannot be sure.
Can anyone help?
I believe the reason is that once you do this:
$scope.user = {
"name": Photos.name
}
You set the value of $scope.user.name to the value of Photos.name at that moment.
When you change Photos.name by doing o.name = 'Jim' within your factory, you're essentially assigning Photos.name a different string object, not changing the one that is already assigned to $scope.user.name.
You can prove my theory by doing something like $scope.user = Photos instead of $scope.user = { ... } (just as a quick proof of concept, of course, rather than a final solution). This way $scope.user.name will actually access the name value that's being held in the Photos factory.
I've got an app assigned to the html tag like this:
<html lang="en" ng-app="pieShopApp">
Which has the route of /pies and uses the mainCtrl:
when('/pies', {
templateUrl: 'templates/pie-list.php',
controller: 'mainCtrl'
}).
And in the mainCtrl I run this block of code to check for authentication changes in Firebase:
Auth.$onAuth(function(authData) {
//Doesn't work
$scope.authData = authData;
//Works
$rootScope.authData = authData;
});
Assigning the logout button another controller which handles the logout (this snippet assumes that $scope is being used, not $rootScope:
<div id="site-access-features">
<a href="#/pies/register">
<button id="register-btn" class="btn">Register</button>
</a>
<a href="#/pies/login">
<button ng-hide="$parent.authData" <!-- doesn't work when using $scope --> id="login-btn" class="btn">Log in</button>
</a>
<a href="#/pies/login">
<button ng-controller="logoutCtrl" ng-show="$parent.authData" <!-- doesn't work when using $scope -->id="logout-btn" class="btn" ng-click="logout()">Log out</button>
</a>
</div>
Now, in the mainCtrl I have to use $rootScope to be able to access the authData in the ng-show="authData" since I have assigned a new controller to the logout button. Why is this? I thought since the logout button is still inside of the mainCtrl's $scope I would be able to use $parent.authData in the markup to access the mainCtrl's $scope but it's not working.
Can someone clarify this for me?
Just use:
"authData"//is on the $rootScope
instead of:
"$parent.authData"
Since you have:
$rootScope.authData = authData;
I'm trying to do the following:
Type something in a search box, perform the related search and show the result defined in a separate view template.
The search thingy is part of a page header and so, my index page is as follows:
index.html
<div class="row search-box">
<div class="col-md-2"></div>
<div class="col-md-6">
<form id="myForm" class="form-inline form-search"
style="padding-left: 10px">
<!-- Search box -->
<input id="in" type="text" ng-model="searchTerm" placeholder="Search for products, categories or brands"
class="search-query input-search">
<button class="btn searchBtn" ng-click="doSearch()" ng-controller="MediaListController">
<i class="icon-search"></i>Search
</button>
</form>
</div>
<div class="col-md-3">
<div class="btn btn-blue cart-btn-cont">
<span class="cart-icon"></span>
</div>
</div>
</div>
...
<div ng-view></div>
Controller (relevant function)
$scope.doSearch = function () {
var type = $scope.mediaType;
$scope.foundItems = MediaService.search().length;
console.log("Found items :"+ $scope.foundItems + "for search term :"+ $scope.searchTerm);
$location.path("/search");
}
app.js
var app= angular.module('sampleApp', ['ngRoute','ngResource','mgcrea.ngStrap']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {templateUrl: 'app/views/partials/login.html', controller: 'LoginController'});
$routeProvider.when('/search', {templateUrl : 'app/views/partials/tpl/search_result.tpl.html'});
$routeProvider.when('/', {templateUrl: 'app/views/landing_page.html', controller: 'MediaListController'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
Search result template:
Found {{ foundItems }} product(s) for search phrase <i>"{{searchTerm}}"</i>
It all works fine, but in getting to this stage, I am confused by the following:
a. Why is $scope.foundItems not visible in the template i.e, {{foundItems}} works only when I use $scope.$parent.foundItems in the controller?
b. If a new child scope is being created, how come $scope.searchTerm is available in the view template i.e., {{searchTerm}}? Is it because ng-model="searchTerm" creates a model binding in the rootScope?
c. I also saw that {{foundItems}} in the template worked fine if I used $rootScope.foundItems, but what if I want to avoid $rootScope - is the use of $scope.$parent valid?
Thanks in advance.
a. Why is $scope.foundItems not visible in the template i.e, {{foundItems}} works only when I use $scope.$parent.foundItems in the controller?
I think it's a little strange to assign the same controller in the ng-view and then another tag like button. Because button will create its own scope right there. And then ng-view also creates one.
b. If a new child scope is being created, how come $scope.searchTerm is available in the view template i.e., {{searchTerm}}? Is it because ng-model="searchTerm" creates a model binding in the rootScope?
that scope has nothing to do with the doSearch scope actually.
c. I also saw that {{foundItems}} in the template worked fine if I used $rootScope.foundItems, but what if I want to avoid $rootScope - is the use of $scope.$parent valid?
You should probably have a main controller for the page and then call everything from there perhaps.