I work in Angular 2 project (and also use Ionic 2).
In my project, I have a page to display pictures-list.
User can add/remove pictures (by cordova-camera plugin).
My problem is: when user remove picture, I remove it from list behind UI.
Debugging at chrome - work nice.
BUT, try emulate on IOS, or really test on Smart-phone, when user delete picture the view is doesn't get refresh till he press any button.
What should I do???
Here is my code:
HTML:
<ion-list>
<ion-col width-50 *ngFor="let picture of pictures">
<div>
<button (click)="checkAsGood(picture)">I like</button>
<button (click)="deletePicture(picture)"><ion-icon name="trash"></ion-icon></button>
</div>
<div>
<img [src]="picture.src" />
</div>
</ion-col>
</ion-list>
Java Script:
private deletePicture(pictureRecord:Picture) {
var self = this;
self.pictureService.deleteUserPicture(pictureRecord).then(function deleteSucceeded() {
self.pictures.splice(self.pictures.indexOf(pictureRecord), 1);
}, function deleteFaild(error) {
self.messagesService.showToastMessage(error.code)
});
}
Call change detection explicitly
class MyComponent {
constructor(private cdRef:ChangeDetectorRef) {}
private deletePicture(pictureRecord:Picture) {
this.pictureService.deleteUserPicture(pictureRecord).then(() => {
this.pictures.splice(this.pictures.indexOf(pictureRecord), 1);
this.cdRef.detectChanges();
}, (error) => {
this.messagesService.showToastMessage(error.code)
});
}
}
or ensure the callback is executed in Angulars zone already in the service using zone.run(...).
It looks like some functionality your pictureService is using functionality that isn't fully covered by the zone.js package on IOS.
Related
My app automatically update $content value without me clicking on buttons. I know it is a simple question, but I can't find out why, I'm learning svelte.
App.svelte
<script>
import { content } from './store.js';
import Item from './Item.svelte';
$content = [{ id:0,obj: "Fell free to browse any category on top." }];
function addContent(value) {
$content = [{ id:0,obj: value}]
}
</script>
<li><button on:click={addContent("Home Page")}>Home</button></li>
<li><button on:click={addContent("Products Page")}>Products</button></li>
<div class="Content">
<p>Fell free to browse any category on top.</p>
{#each $content as item}
<p><svelte:component this={Item} objAttributes={item} /></p>
{/each}
</div>
store.js
import { writable } from 'svelte/store';
export let content = writable({});
Item.svelte
<script>
import { fade } from 'svelte/transition';
export let objAttributes = {};
</script>
<p transition:fade>
{objAttributes.obj}
{#if objAttributes.otherattrib}<em>{objAttributes.otherattrib}</em>{/if}
</p>
This is because your on:click events are defined wrongly.
The on:click takes as argument a function like this
<button on:click={functionGoesHere}>
or, if you want it inlined
<button on:click={() => { }>
What happens in your case is that you directly call a function and the result of this function will then be called when the button is clicked. You can see that in this example:
<script>
function createFn() {
return () => console.log('logging this')
}
</script>
<button on:click={createFn}>Click here</button>
in this example the function () => console.log('logging this') will be attached the button.
So to come back to your code, this is easily fixed by making it a function instead of a function call:
<li><button on:click={() => addContent("Home Page")}>Home</button></li>
I have been trying to get caught up to speed with Vue.js and am working on an asp.net mvc 5 web application that heavily uses jQuery and I would like to start integrating Vue and start replacing jQuery.
I have spent a couple days now trying to integrate Vue into an asp.net mvc 5 web application and with the help of this Best approach when replacing jQuery with VueJS 2 in multi-page existing .NET MVC application, and followed 1_bug's answer.
So in the project that I am hoping to integrate Vue, I am thinking of using components in the partial views first before tackling the the other views.
So in short my question is, how to use Vue components (IE: *.vue files) inside partial views?
I was able to integrate Vue v.2.6 in my ASP.NET Core project without JavaScript bundler using partial views. It should work the same way in a ASP.NET MVC project.
Please check my answer to How do I set up ASP.NET Core + Vue.js? or the sample project on Github for details: ASP.NET Core + Vue.js
I also wrote a step by step description of Using Vue Components in ASP.NET Core at Medium.
This is how I do it. .Vue files are only possible if you use vue-loader (webpack) but as ours is a legacy project, that's not possible
$("vue-category-gallery").each(function () {
new Vue({
el: this,
data: () => ({
action: "",
categoryList: []
}),
beforeMount: function () {
const actionAttribute = this.$el.attributes["data-action"];
if (typeof actionAttribute !== "undefined" && actionAttribute !== null) {
this.action = actionAttribute.value;
} else {
console.error("The data-attribute 'action' is missing for this component.");
}
},
mounted: function () {
if (this.action !== "") {
CategoryService.getGalleryCategoryList(this.action).then(response => {
this.categoryList = response.data;
});
}
},
methods: {
// none
},
template: `
<div class="c-category-gallery" v-if="categoryList.length > 0">
<div class="row">
<div class="col-md-3 col-sm-4" v-for="category in categoryList" :key="category.id">
<div class="c-category-gallery__item">
<img :src="category.imageUrl" :alt="category.name" class="img-responsive"></img>
<div class="c-category-gallery__item-content">
<h4>{{ category.name }}</h4>
<ul class="list-unstyled">
<li v-for="subCategory in category.subCategoryList" :key="subCategory.id">
<a :href="subCategory.categoryUrl" v-if="subCategory.showCategoryUrl">{{ subCategory.name }}</a>
</li>
</ul>
<a :href="category.categoryUrl" v-if="category.showCategoryUrl">{{ category.detailName }}</a>
</div>
</div>
</div>
</div>
</div>`
});
})
Calling it from HTML goes as follows...
<vue-category-gallery
data-action="/api/categories/getcategorygallerylist?itemCount=4"
v-cloak></vue-category-gallery>
I am currently looking into Vue.component("", ...) but that's still in testing :)
EDIT:
With Vue.component("", ...)
Vue.component("vue-person", {
props: ["name"],
data: function () {
return {
type: "none",
age: 0
}
},
template: `<div>
<p>My name is {{name}}.</p>
<p>I am {{type}} and age {{age}}.</p>
</div>`
})
var vm = new Vue({
el: "vue-components",
components: [
"vue-person"
]
})
$(".js-change-value").on("click", function () {
vm.$refs.myPersonComponent.type = "human";
vm.$refs.myPersonComponent.age = 38;
})
<vue-components>
<vue-person name="Kevin" ref="myPersonComponent"></vue-person>
<button type="button" class="js-change-value">Change value</button>
</vue-components>
I would love to be able to omit the wrapper but as I'm already using other instances (new Vue()) on my page, I couldn't use for example '#main' (being the id on the body element) as it clashes with other global instances I already have on my page.
I'm developing asp.net mvc a project with angular js.
I'm working on tabs and install related partial view after click event.
I am sending with partial view html of the json to main page but angular codes doesn't work on the page
What can i do?
Sample Problem
html:
<div ng-app="MyAppS">
<div ng-controller="AnaTest">
<button id="btn1" ng-click="btn1Click()">click</button>
</div>
<div id="m_area">
</div>
<br />{{ 'Hello Angular' }}</div>
javascript:
var m_app = angular.module('MyAppS', []);
function AnaTest($scope) {
$scope.btn1Click = function () {
var runtimeBtn = angular.element("<button ng-click=\"btn2Click()\">Help Me! </button>");
$('#m_area').html(runtimeBtn);
};
$scope.btn2Click = function(){
debugger;
alert('Why can not show?!');
};
};
m_app.controller('AnaTest', AnaTest);
You need to $compile it:
var runtimeBtn = $compile(angular.element("<button ng-click=\"btn2Click()\">Help Me!</button>"))($scope);
See it here: http://jsfiddle.net/7yqrjdkk/8/
However, a more "Angular" way to do it would be putting it under the same controller/scope and simply using ng-show, like this: http://jsfiddle.net/7yqrjdkk/9/
A short background:
This example is a slightly more complicated version of my Angular Dart: Data binding doesn't work when manipulating the controller from the outside question that has been answered correctly. I only added a toggleable "show resolved comments" link to this version. Even though I initialized every variable to non-null values the problem still happens.
Full description of the actual problem:
I have two controllers nested into each other. The outer controller shows/hides the inner controller by using an ng-switch directive.
The outer controller also contains a checkbox. If this checkbox gets checked then the inner controller is made visible (via the above ng-switch directive). This checkbox works as intended.
There's also an "open" link outside the controllers. Its onclick handler calls into the outer controller and is supposed to check the checkbox via the model. The problem is that even though the model gets changed, the view doesn't get updated, unless I explicitly call scope.apply(), which I shouldn't. Even if I remove the comment before scope.apply() in my code then data binding doesn't work within InnerController.
This pattern has worked flawlessly in AngularJS but apparently doesn't in AngularDart.
I insist to this pattern or something similar because I'm in the process of integrating AngularDart into a legacy application that doesn't use data binding so I have to trigger model changes from outside the models.
Thanks in advance!
<html ng-app>
<head>
<title>Angular.dart nested controllers</title>
</head>
<body>
open
<div outer-controller ng-switch="outerCtrl.showInnerController">
<input type="checkbox" ng-model="outerCtrl.showInnerController">
<div inner-controller ng-switch-when="true">
Your name: <input ng-model="innerCtrl.yourName">
<br>
Hello {{innerCtrl.yourName}}!
<div ng-switch="innerCtrl.showResolvedComments" style="text-decoration:underline; color:blue; cursor:pointer">
<div ng-switch-when="true" ng-click="innerCtrl.showResolvedComments = false">Hide resolved comments</div>
<div ng-switch-when="false" ng-click="innerCtrl.showResolvedComments = true">Show resolved comments</div>
</div>
</div>
<div inner-controller ng-switch-when="false">
other controller
</div>
</div>
<script type="application/dart">
import "dart:html";
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
OuterController outerController;
#Controller(selector:'[outer-controller]', publishAs:'outerCtrl')
class OuterController {
bool showInnerController = false;
Scope scope;
OuterController(this.scope) {
outerController = this;
}
void showOuterController() {
showInnerController = true;
//scope.apply();
}
}
#Controller(selector:'[inner-controller]', publishAs:'innerCtrl')
class InnerController {
String yourName = 'defaultName';
bool showResolvedComments = true;
}
class MyAppModule extends Module {
MyAppModule() {
type(InnerController);
type(OuterController);
}
}
main() {
applicationFactory().addModule(new MyAppModule()).run();
querySelector('#open').onClick.listen((Event event) {
outerController.showOuterController();
});
}
</script>
</body>
</html>
After some experimentation, it's look like angular listen specified event to activate ng-model, and it doesn't look every variable change, i think because it's complicated to watch every change in variable without impact performance.
You can change your approach by simulate a user click on the check box
like:
CheckboxInputElement checkBox = querySelector("input");
if (checkBox.checked == false) {
checkBox.click();
}
It's maybe not the cleaner way to do this, but it works
Here the full code with the patch
<html ng-app>
<head>
<title>Angular.dart nested controllers</title>
</head>
<body>
open
<div outer-controller ng-switch="outerCtrl.showInnerController">
<input type="checkbox" ng-model="outerCtrl.showInnerController">
<div inner-controller ng-switch-when="true">
Your name: <input ng-model="innerCtrl.yourName">
<br>
Hello {{innerCtrl.yourName}}!
<div ng-switch="innerCtrl.showResolvedComments" style="text-decoration:underline; color:blue; cursor:pointer">
<div ng-switch-when="true" ng-click="innerCtrl.showResolvedComments = false">Hide resolved comments</div>
<div ng-switch-when="false" ng-click="innerCtrl.showResolvedComments = true">Show resolved comments</div>
</div>
</div>
<div inner-controller ng-switch-when="false">
other controller
</div>
</div>
<script type="application/dart">
import "dart:html";
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
OuterController outerController;
#Controller(selector:'[outer-controller]', publishAs:'outerCtrl')
class OuterController {
bool showInnerController = false;
Scope scope;
OuterController(this.scope) {
outerController = this;
}
void showOuterController() {
showInnerController = true;
print("showOuterController");
//scope.apply();
}
}
#Controller(selector:'[inner-controller]', publishAs:'innerCtrl')
class InnerController {
String yourName = 'defaultName';
bool showResolvedComments = true;
}
class MyAppModule extends Module {
MyAppModule() {
type(InnerController);
type(OuterController);
}
}
main() {
applicationFactory().addModule(new MyAppModule()).run();
querySelector('#open').onClick.listen((Event event) {
outerController.showOuterController();
// Added Code
CheckboxInputElement checkBox = querySelector("input");
if (checkBox.checked == false) {
checkBox.click();
}
// End added code
});
}
</script>
</body>
</html>
Basically I want to display a list of friends (with pictures and names) and invite them to my app I'm creating in rails with the fb_graph gem. The link shows the flow of how this would work, basically you would click an "Invite Friends" button and a list of friends would pop up with a button allowing you to invite the respective user.
http://www.quora.com/User-Acquisition/What-is-the-best-invite-a-friend-flow-for-mobile
Is there a way to do this with fb_graph?
You bet. Assuming you have a working implementation of fb_graph, you can get a list of friends with the following command (from https://github.com/nov/fb_graph ):
FbGraph::User.me(fb_token).friends
You can use that to generate your UI for your friends list, then invite the selected friends, like so ( untested modification from the previous link, as well as https://developers.facebook.com/docs/reference/dialogs/requests/ ):
app_request = FbGraph::User.me(token).app_request!(
:message => 'invitation message',
:to => friend.uid
)
The previous code also can accept a comma separated collection of UIDs.
I'll leave you to design and code the UI, but it is possible, using fb_graph, for sure. Those two links should be solid gold, should you decide to expand the scope, at all.
Thanks for your interest for my gem.
Brad Werth's code works for existing (= already installed your app) users, but probably not for new users.
There are lots of limitations to send App Requests in background to avoid spamming.
That limitation directly affect fb_graph's sending App Request feature.
If you are developing iOS app, I recommend you to use FB official iOS SDK.
https://developers.facebook.com/docs/howtos/send-requests-using-ios-sdk/
Using iOS SDK (or JS SDK in html5 app), you have less limitations.
ps.
I'm not familiar with Android App development nor FB official Android SDK, but I assume they have something similar functionality in their Android SDK too.
Of course Facebook provides a beautiful dialog box to select friends that you want to send requests to. But there is also a nice tool, built in javascript, through which you have the same kind of Facebook Friends selector dialog box.
JQuery Facebook Multi-Friend Selector Plugin
This plugin will make a Graph API call to Facebook and collect your friend list. The advantage of this plugin is that it will load all the friends list in "lazy loading mode".
This might be of some help, I used it on my PHP server and it worked.
This code helps you post, send messages, and also send requests to your friends.
Head tag:
<script type="text/javascript">
function logResponse(response) {
if (console && console.log) {
console.log('The response was', response);
}
}
$(function(){
// Set up so we handle click on the buttons
$('#postToWall').click(function() {
FB.ui(
{
method : 'feed',
link : $(this).attr('data-url')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
$('#sendToFriends').click(function() {
FB.ui(
{
method : 'send',
link : $(this).attr('data-url')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
$('#sendRequest').click(function() {
FB.ui(
{
method : 'apprequests',
message : $(this).attr('data-message')
},
function (response) {
// If response is null the user canceled the dialog
if (response != null) {
logResponse(response);
}
}
);
});
});
</script>
Body Tag:
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxxxxx', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Listen to the auth.login which will be called when the user logs in
// using the Login button
FB.Event.subscribe('auth.login', function(response) {
// We want to reload the page now so PHP can read the cookie that the
// Javascript SDK sat. But we don't want to use
// window.location.reload() because if this is in a canvas there was a
// post made to this page and a reload will trigger a message to the
// user asking if they want to send data again.
window.location = window.location;
});
FB.Canvas.setAutoGrow();
};
// Load the SDK Asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<header class="clearfix">
<?php if (isset($basic)) { ?>
<p id="picture" style="background-image: url(https://graph.facebook.com/<?php echo he($user_id); ?>/picture?type=normal)"></p>
<div>
<h1>Welcome, <strong><?php echo he(idx($basic, 'name')); ?></strong></h1>
<p class="tagline">
This is your app
<?php echo he($app_name); ?>
</p>
<div id="share-app">
<p>Share your app:</p>
<ul>
<li>
<a href="#" class="facebook-button" id="postToWall" data-url="<?php echo AppInfo::getUrl(); ?>">
<span class="plus">Post to Wall</span>
</a>
</li>
<li>
<a href="#" class="facebook-button speech-bubble" id="sendToFriends" data-url="<?php echo AppInfo::getUrl(); ?>">
<span class="speech-bubble">Send Message</span>
</a>
</li>
<li>
<a href="#" class="facebook-button apprequests" id="sendRequest" data-message="Test this awesome app">
<span class="apprequests">Send Requests</span>
</a>
</li>
</ul>
</div>
</div>
<?php } else { ?>
<div>
<h1>Welcome</h1>
<div class="fb-login-button" data-scope="user_likes,user_photos"></div>
</div>
<?php } ?>
</header>