I trying to use directives to show controller data in the my view but nothing displays and there are no errors in the console. I am able to log the data but the data will not show in view. Am I using directives the correct way? How do I show the data in the view? Thank you.
index.html
<body ng-app="GameboardApp">
<div class="header">
<h1 class="logo">GameBoard</h1>
</div>
<div class="main" ng-controller="ScoreController">
<div class="container">
<div class="row" >
<game ng-repeat="score in scores" info="score"></game>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/ScoreController.js"></script>
<!-- Directives -->
<script src="js/directives/game.js"></script>
App.js
var app = angular.module('GameboardApp', []);
Controllers
ScoreController:
app.controller('ScoreController', ['$scope', function($scope) {
$scope.scores = [
{
datetime: 1420848000000,
visitor_team: {
city: "Charlotte",
name: "Hornets"
},
home_team: {
city: "New York",
name: "Knicks"
},
period: "Final",
visitor_score: 110,
home_score: 82
},,
...
},
{
datetime: 1420848000000,
visitor_team: {
city: "Orlando",
name: "Magic"
},
home_team: {
city: "Portland",
name: "Trail Blazers"
},
period: "First Quarter",
visitor_score: 13,
home_score: 26
}
];
console.log($scope.scores);
}]);
directives
game.js
app.directive('game', function() {
return {
restrict: 'E',
score: {
info: '='
},
templateUrl: 'js/directives/game.html'
}
})
game.html
<div class="col-sm-4">
<div class="row scorecard">
<p class="period">{{info.period}}</p>
<div class="visitor col-xs-4">
<h2 class="visitor-score">{{info.visitor_score}}</h2>
<h3>
<span class="visitor-city">{{info.visitor_team.city}}</span><br/>
<span class="visitor-name">{{info.visitor_team.name}}</span>
</h3>
</div>
<div class="dash col-xs-3">
<h2>-</h2>
</div>
<div class="home col-xs-4">
<h2 class="home-score">{{info.home_score}}</h2>
<h3>
<span class="home-city">{{info.home_team.city}}</span><br/>
<span class="home-name">{{info.home_team.name}}</span>
</h3>
</div>
</div>
In game.js file, where you have created the directive, you have misspelled the field name. It should be scope not score.
Related
Hi I'm beginning with vue.js and I don't understand why my infos are not sent to the child component. I tried several differents things and it's not working. I think I'm not that far but I can't figure it out :
App.vue
<template>
<div class="app">
<Header/>
<div class="row">
<div class="col-3">
<Services v-bind:services="services"></Services>
</div>
</div>
</div>
</template>
<script>
import Header from "./components/Header.vue";
import Services from "#/components/Service";
export default {
nam: 'App',
components: {
Services,
Header,
},
data: function () {
return {
services: [{
title: "Logo flatdesign",
description: "Je fais de super flatdesign",
image: "https://fiverr-res.cloudinary.com/t_gig_cards_web_x2,q_auto,f_auto/gigs/22527722/original/3b5876ffb817872561d9eba6788dced76cb78224.jpg",
price: 6.7,
rate: 4,
id:1
},{
title: "Logo rapide",
description: "Je fais vite un logo",
image: "https://fiverr-res.cloudinary.com/t_gig_cards_web_x2,q_auto,f_auto/gigs/142024147/original/2abc0f9433df4f98790707a591772e56bf8777a1.jpg",
price: 5.5,
rate: 3,
id:2
},{
title: "Logo flatdesign",
description: "Je fais de super flatdesign",
image: "https://fiverr-res.cloudinary.com/t_gig_cards_web_x2,q_auto,f_auto/gigs/22527722/original/3b5876ffb817872561d9eba6788dced76cb78224.jpg",
price: 6.7,
rate: 4,
id:3
}]
}
}
}
</script>
<style>
</style>
Service.vue
<template>
<div class="home">
<div class="row">
<div class="col-3" v-for="service in services" v-bind:key="service.id">
<div class="jumbotron">
<img :src="service.image" height="100%" width="100%">
<h4>
{{service.title}}
</h4>
<div class="row">
<div class="col rate">
{{service.rate}} ★
</div>
<div class="col price">
{{service.price}} €
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
</script>
<style scoped>
.rate{
color: yellow;
}
.price{
font-weight: bold;
}
</style>
Thank you so much for your help :) !
Add this to your child component's script to define the passed prop before using it:
export default {
name: "Service",
props: ['services']
};
SOLUTION FOUND: I was just using a version of angular that did not support ng-if.
Here is a simplified version of my code.
First, my partial:
<div>
<div ng-repeat="poll in polls">
<div ng-if="poll.moduleState === 'not-voted'">
<!-- Template 1 -->
Not Voted: {{poll.name}}
</div>
<div ng-if="poll.moduleState === 'voted'">
<!-- Template 2 -->
Voted: {{poll.name}}
</div>
</div>
</div>
And my controller:
function ViewPollsCtrl($q, $scope, $http) {
$scope.polls =
[
{
"name": "module1",
"moduleState": "not-voted"
},
{
"name": "module2",
"moduleState": "voted"
}
];
}
I expect the output to be
Not Voted: module1
Voted: module2
But instead the output is
Not Voted: module1
Voted: module1
Not Voted: module2
Voted: module2
Why? What am I doing wrong? Is it because of a weird interaction between ng-if inside ng-repeat?
Edit: Here is an image of what I am seeing
It works fine with your code.
DEMO
angular.module('myApp',[]).controller('myCtrl', function($scope){
$scope.polls =
[
{
"name": "module1",
"moduleState": "not-voted"
},
{
"name": "module2",
"moduleState": "voted"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<div ng-repeat="poll in polls">
<div ng-if="poll.moduleState === 'not-voted'">
<!-- Template 1 -->
Not Voted: {{poll.name}}
</div>
<div ng-if="poll.moduleState === 'voted'">
<!-- Template 2 -->
Voted: {{poll.name}}
</div>
</div>
</div>
</div>
My custom directive is not working:
html:
<body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<div>
<h3>
<product-title></product-title>
</h3>
...
javascript.app:
...
app.directive('productTitle', function(){
return {
restrice: 'E',
templateUrl: 'product-title.html'
};
});
...
and my product-title.html:
{{product.name}}
<em class="pull-right"> {{product.price | currency}}</em>
in my html page i cant see the product name and product price.
I am new in this subject :)
what should i do to make it work?
please help me.
++thanks everyone for yours answers, it is works! i tried for 3 days to find an answer.. and you did it in 5 min.. thanks! :)++
Couple of issues:
restrict is spelled wrong
Templates for html should have one root, so you should do something like this
<div>
{{product.name}}
<em class="pull-right"> {{product.price | currency}}</em>
</div>
Here is the complete running code for your directive in this JSBin
JS
angular
.module('app', [])
.controller('AppController', function ($scope) {
$scope.store = {
products: [
{ id: 1, price: 132, name: 'abc' },
{ id: 2, price: 127, name: 'def' },
{ id: 3, price: 112, name: 'mno' },
{ id: 4, price: 145, name: 'xyz' }
]
};
})
.directive('productTitle', function(){
return {
restrict: 'E',
templateUrl: 'product-title.html'
};
});
HTML
<div ng-controller='AppController'>
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
<product-title></product-title>
</h3>
</li>
</ul>
</div>
<script id="product-title.html" type="text/ng-template">
{{product.name}}
<em class="pull-right"> {{product.price | currency}}</em>
</script>
I'm trying to get to grips with AngularJS and had this working to echo individual things from a controller, but when I tried to incorporate a loop with ng-repeat all I get is {{tasks.title}} flashing onscreen for a second, then a blank empty div.
Any examples I've looked up seem a little different and I've tried a few ways, can anyone see where I'm going wrong?
Controller:
app.controller('MainController', ['$scope', function($scope) {
$scope.tasklist = {
tasks: [{
title: 'Wash Dog'
}, {
title: 'Email Joe'
}]};
}
]);
HTML:
<section class="panel">
<div ng-controller="MainController">
<div class="thumbnail" ng-repeat="tasks in tasklist">
<p>{{ tasks.title }}</p>
</div>
</div>
</section>
You are accessing the property tasklist not the actual tasks. It should be tasklist.tasks
<section class="panel">
<div ng-controller="MainController">
<div class="thumbnail" ng-repeat="tasks in tasklist.tasks">
<p>{{ tasks.title }}</p>
</div>
</div>
</section>
Another way would be to remove the tasks property:
app.controller('MainController', ['$scope', function($scope) {
$scope.tasklist = [
{
title: 'Wash Dog'
},
{
title: 'Email Joe'
}
];
}]);
I am having trouble getting my tab content to appear properly on page load. What I have is a factory of Objects called apiList, I then use two ng-repeats, one which hits each object in the apiList, then the next one which iterates through that object and puts all of its data on the page. I use #tab{{$index}} to keep my data-toggles aligned between the buttons and tab-panes.
The problem seems to be with how I use the active attribute on my tab-pane.
I have three known test cases so far.
I can only get information from the first Object by using the condition ng-class="{ 'active': $index == 0}" as in..
<div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}" ng-class="{ 'active': $index == 0}">
If I remove the conditional from the line then nothing appears
And if I just add active to the pane value (with no condition)
(i.e. <div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}"> They all appear.
So my problem seems to be with how I need to turn on/off my active for the ng-repeat and I am just getting lost.
Also, clicking on accounts/customers does not update the tabs. They both have the right data-toggle ID's (0 and 1) in respect to the tab-panes so I assume it is part of the active issue. And whenever I click on my tab panes, they do expand just fine.
Here is my Factory, ng-repeat(s), and the code that was my original setup (functional).
Factory
.factory('APIMethodService', [function() {
var Head = "api.verifyvalid";
return {
apis: [
{
accounts: [
{
parameters : [
{
name : "Accounts",
version : "1.0"
}
],
uri: Head + "/v1/accounts/account_number",
methods : [
{
name: "Account Number",
desc: "Returns the account number."
}, {
name: "Account Money",
desc: "Returns the monetary amount within the account."
}
]
},
{
parameters : [
{
name : "Accounts",
version : "2.0"
}
],
uri: Head + "/v2/accounts/account_number",
methods: [
{
name: "Account Number",
desc: "Returns the account number."
}, {
name: "Account Money",
desc: "Returns the monetary amount within the account."
}, {
name: "Account Token",
desc: "Returns the account's token."
}
]
}
],
customers:[
{
parameters : [
{
name : "Customers",
version : "1.0"
}
],
uri: Head + "/v1/customers/customer_number",
methods : [
{
name: "Customer Name",
desc: "Returns the customer's name."
}, {
name: "Customer ID",
desc: "Returns the customer's ID."
}
]
},
{
parameters : [
{
name : "Customers",
version : "2.0"
}
],
uri : Head + "/v2/customers/customer_number",
methods: [
{
name: "Customer Name",
desc: "Returns the customer's name."
}, {
name: "Customer ID",
desc: "Returns the customer's ID."
}, {
name: "Customer Email",
desc: "Returns the customer's email."
}
]
}
]
}
]
};
ng-repeat (just the right-hand tabs)
<div class="col-md-9">
<div class="tab-content">
<div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}">
<div ng-repeat="api in apiList[0][key]">
<div class="panel panel-info" id="panel{{$index}}">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapse{{key}}{{$index}}" class="collapsed">
{{api.uri}}<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</a>
</h4>
</div>
<div id="collapse{{key}}{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The following code is what I originally had, before trying to crunch it down more
<div class="col-md-9" style="display:none">
<div class="tab-content">
<!-- Accounts -->
<div class="tab-pane active" id="tab0">
<div ng-repeat="api in apiList[0].accounts">
<div class="panel panel-info" id="panel0">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseAccountsV{{$index}}" class="collapsed">
{{api.uri}}
</a>
<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</h4>
</div>
<div id="collapseAccountsV{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Customers -->
<div class="tab-pane" id="tab1">
<div ng-repeat="api in apiList[0].customers">
<div class="panel panel-info" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseCustomersV{{$index}}" class="collapsed">
{{api.uri}}<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</a>
</h4>
</div>
<div id="collapseCustomersV{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Other -->
<div class="tab-pane fade" id="tab3">
<!-- TBA -->
</div>
</div>
</div>
Noob mistake, everything works fine! I was using my old code as the base outline on the same page and had set that old code to style="display:hidden" but this still meant that the ID's were apart of the DOM, hence why I couldn't change my tab's properly (duplicate/conflicting ID's).