I am trying to create a simple application in AngularJS and for some reason I cannot figure out why my routing is not binding the controller to the template. When I click on my links they take me to the correct path and the code is executed and the template is displayed in the data-ng-view directive. What does not happen is the template is not bound to the networkController? I been trying to figure it out for a while now and I am stuck any help would be appreciated.
Thank You!
Here is all my code;
app.js
'use strict';
var habeoApp = angular.module('habeo', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when(
'/network/:id',
{
templateUrl: '/app/templates/networkDetails.html',
controller: NetworkCntl
}
);
});
function NetworkCntl($scope, $routeParams) {
$scope.name = "networkController";
$scope.params = $routeParams;
}
networkListController.js
'use strict';
habeoApp.controller('networkListController',
function networkListController($scope) {
$scope.networks = [
{ name: 'Data Network', activeClass: "", url: "#/network/1" },
{ name: 'Voip', activeClass: "", url: "#/network/2" },
{ name: 'Servers', activeClass: "", url: "#/network/3" },
{ name: 'Clients', activeClass: "", url: "#/network/4" }
];
$scope.selectNetwork = function(network) {
clearSelectedNetwork();
network.activeClass = "active";
console.log(network.name);
};
var clearSelectedNetwork = function() {
$.each($scope.networks, function(index, value) {
value.activeClass = "";
});
};
}
);
networkController.js
'use strict';
habeoApp.controller('networkController', ['$scope', '$routeParams'],
function networkController($scope, $routeParams) {
var par = $routeParams;
$scope.network = {
availableIps: 200,
assignedIps: 55,
totalIps: 255,
ips: [
{ ipAddress: "10.39.2.7", dns: "sw-lnp-vhdev", requested: "2013/12/04", Owner: "Lukasz Maslanka" },
{ ipAddress: "10.39.3.17", dns: "sw-lnp-vh7", requested: "2013/12/02", Owner: "Tom Bedard" },
{ ipAddress: "10.39.3.19", dns: "sw-lnp-vh10", requested: "2013/12/01", Owner: "Blake Kennedy" },
{ ipAddress: "10.39.4.114", dns: "sw-lnp-vh12", requested: "2013/11/27", Owner: "Terry McKerral" },
{ ipAddress: "10.39.4.171", dns: "sw-lnp-vh21", requested: "2013/11/14", Owner: "Andrew Henry" }
]
};
}
);
networkDetails.html
<div class="row">
<div class="col-md-4 info-box-blue">
<h5 class="">Available IP's</h5>
</div>
<div class="col-md-4 info-box-lightblue">
<h5 class="">Assigned IP's</h5>
</div>
<div class="col-md-4 info-box-green">
<h5 class="">Total IP's</h5>
</div>
</div>
<div class="row">
<div class="col-md-4 info-box-blue info-box-footer-padding">
<h1 class="text-center info-box">{{network.availableIps}}</h1>
</div>
<div class="col-md-4 info-box-lightblue info-box-footer-padding">
<h1 class="text-center info-box">{{network.assignedIps}}</h1>
</div>
<div class="col-md-4 info-box-green info-box-footer-padding">
<h1 class="text-center info-box">{{network.totalIps}}</h1>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-primary wide">Request IP</button>
</div>
<div class="row">
<input type="text" class="form-control wide" placeholder="Search...">
</div>
<div class="row top-margin">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>IP Address</th>
<th>DNS</th>
<th>Requested</th>
<th>Owner</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ip in network.ips">
<td>{{ip.ipAddress}}</td>
<td>{{ip.dns}}</td>
<td>{{ip.requested}}</td>
<td>{{ip.owner}}</td>
</tr>
</tbody>
</table>
</div>
index.cshtml
<div class="row" data-ng-controller="networkListController">
<div class="col-md-3">
<div class="add-vlan-button-container">
<button type="button" class="btn btn-default add-vlan-button" data-toggle="modal" data-target="#add-new-network-form">Add Network</button>
</div>
<div class="">
<ul class="nav nav-pills nav-stacked">
<li data-ng-class="network.activeClass" data-ng-repeat="network in networks" data-ng-click="selectNetwork(network)">{{network.name}}</li>
</ul>
</div>
</div>
<div class="col-md-9" data-ng-view>
</div>
</div>
There is bug in your networkController definition: the array should contain the function (which is the controller) as the last argument, not as a separate third argument.
habeoApp.controller('networkController', ['$scope', '$routeParams',
function networkController($scope, $routeParams) {
var par = $routeParams;
$scope.network = {
availableIps: 200,
assignedIps: 55,
totalIps: 255,
ips: [
{ ipAddress: "10.39.2.7", dns: "sw-lnp-vhdev", requested: "2013/12/04", Owner: "Lukasz Maslanka" },
{ ipAddress: "10.39.3.17", dns: "sw-lnp-vh7", requested: "2013/12/02", Owner: "Tom Bedard" },
{ ipAddress: "10.39.3.19", dns: "sw-lnp-vh10", requested: "2013/12/01", Owner: "Blake Kennedy" },
{ ipAddress: "10.39.4.114", dns: "sw-lnp-vh12", requested: "2013/11/27", Owner: "Terry McKerral" },
{ ipAddress: "10.39.4.171", dns: "sw-lnp-vh21", requested: "2013/11/14", Owner: "Andrew Henry" }
]
};
}]
);
I am assuming that you wanted to use the networkController as the controller for networkDetail.html and NetworkCntl is merely a dummy controller you introduced during your debugging.
Working demo: http://plnkr.co/edit/uA59OUGZr1FiiNy5tnTT?p=preview
Related
I have this data in my index.js file:
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.demos = [ {
paragrafo: 'richiesta',
title:'demo1',
paragrafo2:'dskjdfdjfdfjkdf',
link: 'https://www.google.it',
},
{
paragrafo: 'richiesta',
title:'demo2',
paragrafo2:'dfhfhfjgfkjghfjkgf',
link: 'https://www.youtube.it',
},
{
paragrafo: 'richiesta',
title:'demo3',
paragrafo2:'sjdsdjddfjdf',
link: 'https://www.sportmediaset.it',
},
{
paragrafo: 'richiesta',
title:'demo4',
paragrafo2:'sdjkdhdkjfhdjfh',
link: 'https://www.elbocon.pe',
},
];
})
.component('card', {
templateUrl: 'card.html'
})
in my card.html component i used ng-repeat, i tried iterating it with ng -repeat:
<div ng-repeat="demo in demos">
<div class="card" style="width: 18rem">
<div class="card-body">
<p>{{demo.paragrafo}}</p>
<h5 class="card-title">{{demo.title}}</h5>
<h6 class="card-subtitle mb-2 text-muted"></h6>
<p class="card-text">{{demo.paragrafo2}}</p>
<a class="card-link">{{demo.link}}</a>
</div>
</div>
</div>
and in index.html, I put the component in the html index as well:
<body ng-app="app" ng-cloak>
<div ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col">
<card></card>
</div>
</div>
</div>
</div>
</body>
But it doesn't work, I would like 4 cards with different data to appear, can someone help me?
You need to bind your data to the component. Additionally, accessing that data inside the component requires a reference to $ctrl.
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.demos = [{
paragrafo: 'richiesta',
title: 'demo1',
paragrafo2: 'dskjdfdjfdfjkdf',
link: 'https://www.google.it',
},
{
paragrafo: 'richiesta',
title: 'demo2',
paragrafo2: 'dfhfhfjgfkjghfjkgf',
link: 'https://www.youtube.it',
},
{
paragrafo: 'richiesta',
title: 'demo3',
paragrafo2: 'sjdsdjddfjdf',
link: 'https://www.sportmediaset.it',
},
{
paragrafo: 'richiesta',
title: 'demo4',
paragrafo2: 'sdjkdhdkjfhdjfh',
link: 'https://www.elbocon.pe',
},
];
}])
.component('card', {
bindings: {
demo: '<'
},
template: '<div class="card" style="width: 18rem"><div class="card-body"><p>{{$ctrl.demo.paragrafo}}</p><h5 class="card-title">{{$ctrl.demo.title}}</h5><h6 class="card-subtitle mb-2 text-muted"></h6><p class="card-text">{{$ctrl.demo.paragrafo2}}</p><a class="card-link">{{$ctrl.demo.link}}</a></div></div>'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<card demo="data" ng-repeat="data in demos">
</card>
</div>
I'm working on a filtering feature in a Vue application. I'm new to Vue, and I have the filter semi-working. It successfully allows me to select an asset type from the dropdown, and will filter the results accordingly. But what's not working is the clearFilters method.
My goal is to reset the assetType to an empty string and the filterResults array to empty, and my thought was that since checking the length of filterResults, when I clear it it would return to displaying the entire un-filtered array.
What am I doing wrong? Any information would be greatly appreciated.
<template>
<div ref="content">
<div class="container pt-3 text-center">
<div class="filter-container">
<div class="btn-group">
<button
v-ripple="'rgba(255, 255, 255, .2)'"
#click="showAssetType = !showAssetType"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
style="max-height: 40px;">
{{assetType ? assetType : 'Asset Type'}}
</button>
<div class="dropdown-menu" :style="'display:' + (showAssetType ? 'block' : 'none') + ';'">
<a class="dropdown-item" #click.prevent="setAssetFilter('all')" href="#!">All Assets</a>
<a class="dropdown-item" #click.prevent="setAssetFilter('USD'); filterByAssetType()" href="#!">USD</a>
<a class="dropdown-item" #click.prevent="setAssetFilter('GBP'); filterByAssetType()" href="#!">GBP</a>
<a class="dropdown-item" #click.prevent="setAssetFilter('CAD'); filterByAssetType()" href="#!">CAD</a>
</div>
</div>
</div>
</div>
<div id="data-table" v-if="filterResults.length > 0">
<div v-for="(transaction, index) in filterResults" :key="index">
<global-history-item>
<template v-slot:header>
<h1 class="date">{{formatDate(transaction.date)}}</h1>
<div class="transaction-header-wrapper">
<p class="transaction-text">{{formatString(transaction.tx_type)}} Transaction</p>
<p class="transaction-text" style="text-align: right">{{transaction.coin_type}}</p>
</div>
</template>
<template v-slot:content>
<global-transaction :transaction='transaction' #updateClassType="updateClassType" />
</template>
</global-history-item>
</div>
</div>
<div id="data-table">
<div v-for="(item, index) in totalHistory" :key="index">
<div v-if="item.tx_type">
<global-history-item>
<template v-slot:header>
<h1 class="date">{{formatDate(item.date)}}</h1>
<div class="transaction-header-wrapper">
<p class="transaction-text">{{formatString(item.tx_type)}} Transaction</p>
</div>
</template>
<template v-slot:content>
<global-transaction :transaction='item' #updateClassType="updateClassType" />
</template>
</global-history-item>
</div>
<div v-else-if="item.invoice_id">
<global-history-item>
<template v-slot:header>
<h1 class="date">{{formatDate(item.date)}}</h1>
<div class="invoice-header-wrapper">
<p class="invoice-text">Invoice Created</p>
<p class="invoice-text">Invoice #{{item.invoice_id}}</p>
</div>
</template>
<template v-slot:content>
<global-invoice :invoice='item' />
</template>
</global-history-item>
</div>
<div v-else>
<global-history-item>
<template v-slot:header>
<h1 class="date">{{formatDate(item.date)}}</h1>
<div class="invoice-header-wrapper">
<p class="invoice-text">Login Event</p>
<br />
</div>
</template>
<template v-slot:content>
<global-account-activity :message='"A successful login to your account was made"' />
</template>
</global-history-item>
</div>
</div>
</div>
</div>
</template>
<script>
... imports removed for brevity
export default {
name: 'Global',
components: { },
props: ['totalHistory', 'printFormat'],
mixins: ['formatDate', 'formatMenuLabel'],
data () {
return {
showAssetType: false,
showClassType: false,
activityType: '',
assetType: '',
filterResults: [],
printMode: false
}
},
methods: {
setAssetFilter (value) {
this.showAssetType = false
this.assetType = value
},
formatString (str) {
const firstLetter = str.charAt(0)
const remainder = str.slice(1)
return firstLetter.toUpperCase() + remainder
},
updateClassType (transactionRecord) {
this.$store.dispatch('updateTransactionType', transactionRecord)
},
updateTransaction (transactionRecord) {
console.log('in updateTransaction', transactionRecord)
this.$store.dispatch('updateTransactionNote', transactionRecord)
},
filterByAssetType () {
const selectedCurrency = this.assetType
if (this.assetType === 'all') {
this.clearFilters()
} else {
this.filterResults = this.totalHistory.filter(function (trans) {
return trans.currency === selectedCurrency
})
}
},
clearFilters () {
return (this.assetType = '') && (this.filterResults = [])
}
}
}
</script>
So if I am not mistaking, you only want the method clearFilters, to work? If so, try:
clearFilters () {
this.assetType = ''
this.filterResults = []
}
The logical AND operator (&&) is not to chain expressions. It’s to do an expression if the first expression is truthy.
First expression && second expression, example
const questionAnswered = true
console.log(questionAnswered && "Hooray!")
// will log "Hooray!" (Expression 2)
If you set questionAnswered to false, it will log false (expression 1)
I agree with Jens rewrite of clearFilters(). The original looked odd to me.
I had started creating a sample component to demonstrate possibly simplifying the filtering process when there were no answers. Since I have finished it and it works, I am posting it.
ClearFilters.vue
<template>
<div class="clear-filters">
<div class="row">
<div class="col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th>NAME</th>
<th>CURRENCY</th>
</tr>
</thead>
<tbody>
<tr v-for="asset in filteredAssets" :key="asset.id">
<td>{{ asset.name }}</td>
<td>{{ asset.currency }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="criteria-label">FILTER CRITERIA:</label>
<select class="form-control" v-model="currentCriteria">
<option v-for="(criteria, index) in criteriaOptions" :key="index" :value="criteria">{{ criteria }}</option>
</select>
</div>
<button type="button" class="btn btn-secondary" #click="resetFilter">Reset</button>
</div>
</div>
</div>
</template>
<script>
import assets from './clear-filters-data.js';
export default {
data() {
return {
assets: assets,
criteriaOptions: [
'ALL', 'USD', 'GBP', 'CAD'
],
currentCriteria: 'ALL'
}
},
computed: {
filteredAssets() {
if (this.currentCriteria === 'ALL') {
return this.assets;
}
else {
return this.assets.filter( asset => asset.currency === this.currentCriteria);
}
}
},
methods: {
resetFilter() {
this.currentCriteria = 'ALL';
}
}
}
</script>
<style scoped>
.criteria-label {
font-weight: bold;
}
</style>
Test data:
const assets = [
{
id: 1,
name: 'asset1',
currency: 'USD'
},
{
id: 2,
name: 'asset2',
currency: 'USD'
},
{
id: 3,
name: 'asset3',
currency: 'USD'
},
{
id: 4,
name: 'asset4',
currency: 'GBP'
},
{
id: 5,
name: 'asset5',
currency: 'GBP'
},
{
id: 6,
name: 'asset6',
currency: 'GBP'
},
{
id: 7,
name: 'asset7',
currency: 'CAD'
},
{
id: 8,
name: 'asset8',
currency: 'CAD'
},
{
id: 9,
name: 'asset9',
currency: 'CAD'
},
]
export default assets;
In my current project I need to create a dynamic form using AngularJS.
I am already building the form following the ideas from this video here.
I can't seem to get the submitted data back to my controller. I only receive undefined in the console log.
Currently the data for the form is resolved in ui-router before the state is loaded, then copied to the controller's data property.
Unlike the video our form requires that questions are broken down into sections.
There is a ng-repeat over each section in the data, then a nested ng-repeat goes over each question. The type is determined and the proper directive for the question/field type is loaded to via ng-switch.
I whipped up a small Plunker to help illustrate as well.
https://plnkr.co/edit/6dCnHiFDEYu03kfX07mr
Finally there are some types I am unsure how to handle, such as address or phone number which will be considered one question type but have multiple fields.
(e.g. [Street] [City] [State] [Zip])
Controller
namespace portal.dashboard.form{
class formCtrl{
formData: portal.domain.interfaces.IHousingRequest;
static $inject = ["formResolve"];
constructor(private formResolve:any) {
this.formData= this.loadHousingRequestFormData;
}
public submit(isValid,data) {
if (isValid) {
console.log(data);
}
}
}
angular
.module("portal")
.controller("formCtrl", formCtrl);
}
Directive for input type text
namespace portal.directives {
function inputText(): ng.IDirective {
return {
scope: {
model: '='
},
controller: function ($scope: ng.IScope) {
var directiveScope = $scope.$parent.$parent;
},
controllerAs:'vm',
templateUrl: 'form/templates/input-text.html'
}
}
angular
.module("portal")
.directive("inputText", inputText);
}
input type html
<input type="text"
ng-model="model"/>
HTML
<form name="form" ng-submit="vm.submit(form.$valid, data)" novalidate>
<!-- Section repeat -->
<div ng-repeat="section in vm.formData.sections track by $index">
<section>
<div>
<h4>
{{section.name}}<br />
<small ng-show="section.description">{{section.description}}</small>
</h4>
</div>
<section>
<!-- Section questions repeat -->
<div ng-form="formFields" ng-repeat="field in section.fields track by $index">
<label>
{{field.name}}<br />
<small>{{field.description}}</small>
</label>
<!-- input field switch -->
<div ng-switch="field.type">
<div ng-switch-when="Text">
<input-text model="data.answer[$index]">
</input-text>
</div>
<div ng-switch-when="Email">
<input-email model="data.answer[$index]">
</input-email>
</div>
</div>
</div>
</section>
</section>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
You have to init $scope.data = {}; before using it, also use correct sectionIndex and fieldIndex to populate the answer:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {};
$scope.sections = [{
name: 'User Info',
description: 'I\'m a description.',
fields: [{
label: "Name",
type: "text"
}, {
label: "Email",
type: "email"
}]
}, {
name: 'Pet Info',
description: '',
fields: [{
label: "Pet Breed",
type: "text"
}]
}];
$scope.submit = function(isValid, data) {
console.log('submit fired');
if (isValid) {
console.log(data);
}
}
});
app.directive('inputText', function() {
return {
scope: {
model: '='
},
controller: function($scope) {
var directiveScope = $scope.$parent.$parent;
},
controllerAs: 'vm',
template: '<input type="text" ng-model="model"/>'
}
});
app.directive('inputEmail', function() {
return {
scope: {
model: '='
},
controller: function($scope) {
var directiveScope = $scope.$parent.$parent;
},
controllerAs: 'vm',
template: '<input type="email" ng-model="model"/>'
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<form name="form" ng-submit="submit(form.$valid, data)" novalidate>
<!-- Section repeat -->
<div ng-repeat="(sectionIndex, section) in sections track by $index">
<section>
<div>
<h4>
{{section.name}}<br />
<small ng-show="section.description">{{section.description}}</small>
</h4>
</div>
<section>
<!-- Section questions repeat -->
<div ng-form="formFields" ng-repeat="(fieldIndex, field) in section.fields track by $index">
<label>
{{field.label}}<br />
</label>
<!-- input field switch -->
<div ng-switch="field.type">
<div ng-switch-when="text">
<input-text model="data.answer[sectionIndex][fieldIndex]">
</input-text>
</div>
<div ng-switch-when="email">
<input-email model="data.answer[sectionIndex][fieldIndex]">
</input-email>
</div>
</div>
</div>
</section>
</section>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</body>
Also I'm not sure why do you need this var directiveScope = $scope.$parent.$parent; in your directive's controller, do you really need this?
i'm new on VueJS and i'm making a chat following a tutorial.
in the tutorial, the professor puts a v-model in a component. When I do this, the component is not "rendered" on the screen, and the console responds to "text is not defined," I can not find this problem anywhere, if someone can help me, I'll be grateful, follow my html and js.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat JS</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="app">
<router-link to="/chat">Vá para o Chat</router-link><br>
<router-link to="/rooms">Vá para as Salas</router-link><br><br><br>
<router-view></router-view>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>
<script type="text/javascript" src="node_modules/vuefire/dist/vuefire.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</body>
</html>
JS
var firebaseApp = firebase.initializeApp(config);
var db = firebaseApp.database();
const chatComponent = {
template: `
<div class="panel panel-primary">
<div class="panel-heading">Chat</div>
<div class="panel-body" style="height: 400px; overflow-y: scroll;">
<ul class="chat list-unstyled">
<li class="clearfix"
v-bind:class="{left: !isUser(o.email), right: isUser(o.email)}" v-for="o in chat.messages">
<span v-bind:class="{'pull-left': !isUser(o.email), 'pull-right': isUser(o.email)}">
<img v-bind:src="o.photo" class="img-circle"/>
</span>
<div class="chat-body">
<strong>{{o.name}}</strong>
<p>
{{ o.text }}
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-md" placeholder="Digite sua Mensagem..."/>
<span class="input-group-btn">
<button class="btn btn-sucess btn-md">Enviar</button>
</span>
</div>
</div>
</div>
`,
data: function() {
return {
user: {
email: 'jose#gmail.com',
name: 'Jose Joao',
},
chat: {
messages: [
{
email: "fulano#gmail.com",
text: "Olá eu sou o Fulano",
name: "Fulano",
photo: "http://placehold.it/50/000FFF/fff&text=00"
},
{
email: "jose#gmail.com",
text: "Estou Joia, eu sou o Robo",
name: "Robo",
photo: "http://placehold.it/50/FFFFFF/fff&text=EU"
},
{
email: "jose#gmail.com",
text: "Tudo bem com voce",
name: "Robo",
photo: "http://placehold.it/50/FFFFFF/fff&text=EU"
}
]
}
};
},
methods:{
isUser:function(email){
return this.user.email == email;
}
}
};
const RoomsComponent = {
template:`
<div class="col-md-12" >
<div class="col-md-4" v-for="o in rooms">
<div class="panel panel-primary">
<div class="panel-heading">
{{ o.name }}
</div>
<div class="panel-body">
{{o.description}}<br>
Entrar
</div>
</div>
</div>
<div class="col-md-4">
<input type="text" id="problem"/>
<ul>
</ul>
</div>
</div>
`,
firebase:{
array: db.ref('array')
},
data: function() {
return {
rooms: [
{id: "001", name: "Duvidas", description: "Duvidas Gerais"},
{id: "002",name: "Cadastros/Login", description: "Duvidas sobre Acesso"},
{id: "003",name: "Planos", description: "Duvidas sobre os Planos"},
{id: "004",name: "Creditos", description: "Duvidas sobre os Creditos"},
{id: "005",name: "Modelos", description: "Duvidas sobre os Modelos"},
{id: "006",name: "Envios", description: "Duvidas sobre os Envios"}
]
};
},
methods:{
goToChat: function(room){
router.push('/chat/'+room.id)
},
insertData: function(){
this.$firebaseRefs.array.push({
text: this.text
});
}
}
};
const routes =[
{ path: '/chat/:room', component: chatComponent },
{ path: '/rooms', component: RoomsComponent }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
Recalling that the problem is in the input with id "problem" (to facilitate you) Basically as I said, just to put a V-model it of the error, if anyone knows, thank you!
You need to define your components as follows:
Vue.component('chat-component', {
template: `...`,
data: {
// your data
},
methods: {
// your methods
},
// and so on
});
You have only created javascript objects, not Vue components, in your sample code above.
You can also check the jsFiddle examples from previous questions on vue.js in stackoverflow, which will guide you on the syntax for creating Vue components, parent-child communication, etc.
Error: https://docs.angularjs.org/error/ng/areq?p0=ProjectsController&p1=not%20a%20function,%20got%20undefined
I mimicked a ng-repeat that I did earlier, the only difference being I didn't split up the directive, controller, and initializing the app into 3 different javascript files. Also, are you allowed to add multiple ng-apps to the <body> tag? If no, then that may be my problem.
HTML:
<div class="projects">
<h2>Projects</h2>
<div class="row">
<div class="col-lg-12">
<div class="row" ng-controller="ProjectsController">
<div class="project-boxes" ng-repeat="project in projects">
<project-info info="project"></project-info>
</div>
</div>
</div>
</div>
</div>
app.js:
var projectApp = angular.module("projectApp", ['ngAnimate'])
.controller('ProjectsController', ['$scope', function($scope) {
$scope.projects = [
{
link: '#',
img: 'img/box.jpeg',
description: 'Project 1'
}];
}])
.directive('projectsInfo', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'components/projects/projects-template/projectsInfo.html'
};
});