Develop Reference

Custom directive inside ng-repeat

I have this custom directive.
I call my directive like bellow, inside a ng-repeat.
selectedMealCalc.calculated_foods as 'items', is an array of objects
<!-- DIRECTIVE -->
<div ng-repeat="option in [0,1,2,3,4]">
<meal-option option="{{option}}"
items="selectedMealCalc.calculated_foods"
selectedmealcalc="selectedMealCalc"></meal-option> </div>
<!-- DIRECTIVE -->
Then I created this directive in angularjs.
'use strict';
angular.module('nutriApp').directive('mealOption', ['$compile', function($compile) {
return {
restrict: 'E',
templateUrl: 'views/checkins/meal-options.html',
scope: {
option: "#",
items: "=",
selectedmealcalc: "="
},
controller: ['$scope', 'Food', function($scope, Food) {
$scope.sumFood = {};
$scope.summerizeOption = function(foods) {
if(foods.length > 0){
$scope.sumFood = Food.summerize(foods);
}
return $scope.sumFood;
};
}]
};
}]);
And this HTML directive.
<div class="row" ng-init="filteredItems = ( items | filter: { food_option: option } )" ng-controller="CheckinsPlansCtrl">
<div class="col-md-12" ng-show="filteredItems.length > 0">
Opção {{ option }}
<table class="table table-calculo table-striped">
<thead>
<tr>
<th>Alimento</th>
<th>Quantidade</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="foodCalculation in filteredItems track by $index">
<td>{{foodCalculation.food.name}}</td>
<td>{{foodCalculation.gram_amount}} g</td>
</tr>
</tbody>
</table>
</div>
</div>
When I update the selectedMealCalc.calculated_foods the custom directive is not updating.
I have to close the modal and open again in my page to saw the new line.

As this comment Custom directive inside ng-repeat in this post.
I removed the ng-init because ng-init: "Only to initialize a property on the scope. I would recommend not to use it." as this another answer Does ng-init watch over change on instantiated property like ng-model does?

Angular call controller method from directive template

I create simple project with angular and I use directive to create a simple grid like this code :
my directive :
app.directive('dpGrid',()=>{
return{
restrict:"E",
scope:{
items:"="
}
templateUrl: 'template/dbgrid.directive.html'
}
});
my controller :
app.controller('mainCtrl',($scope)=>{
$scope.data=[{fname:"david",lname:"orman",age:24,id:"234"}];
$scope.update=(id)=>{
console.log("ID :",id);
};
});
my directive template :
<table class="table">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>fname</th>
<th>lname</th>
<th>age</th>
<th>opt</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items" >
<th>{{$index}}</th>
<td>{{item.fname}}</td>
<td>{{item.lname}}</td>
<td>{{item.age}}</td>
<td><a class="btn btn-danger" ng-click="update(item.id)">update</a></td>
</tr>
</tbody>
</table>
and I use directive like this :
<dp-grid items="data" ></dp-grid>
I want call update() method from directive template, but dont call update() method when click on update btn

You simply need to specify the controller your directive should use, then access it in template.
return {
restrict:"E",
scope:{
items:"="
},
controller: 'mainCtrl',
templateUrl: 'template/dbgrid.directive.html'
}
Then you will be able to access the function in the templates. If you are accessing it from a child isolate scope, you may need to access it using $parent.

API call on click of link in angular JS

I am trying to call an api on click of a link and show the data in a new view , but i am not seeing any data neither an error on console.I tried using Log also but thats also not giving me any clue.
Here is my code in View:
<tr class="well-new" ng-repeat="product in gettempdata.FoodItems| orderBy:'Id' | filter:search"">
<td class="tdCenter" >
{{product.Id}}
</td>
<td class="tdCenter">
<img ng-src="{{product.ImageUrl}}" alt="{{product.Name}}" />
</td>
<td>
<b>{{product.Name}}</b><br />
{{product.Category}}
</td>
</tr>
</table>
I am trying to call GetItemDetails(Id).
Controller code:
myStore.controller("Home", function ($scope, StoreService, $log, $window) {
var onComplete = function (data) {
$scope.gettempdata = data;
}
var onError = function (reason) {
alert(reason.errorcode);
}
$scope.GetItemDetails = function (Id) {
$log.info("wait for 5 secs");
StoreService.getItemDetails(Id).then(onComplete, onError);
$log.info("done");
}
});
App.js code:
var myStore = angular.module('groceries', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.
when("/Home", {
templateUrl: "/Index.html",
controller: "Home"
}).
when("/Name", {
templateUrl: "Store/Product.html",
controller: "Home"
}).
otherwise
({
redirectTo: "/Home"
})
});
The Home view:
<html ng-app="groceries">
<head>
<script> ALL scripts</scripts>
<title></title>
</head>
<body>
<!--
bootstrap fluid layout
(12 columns: span 10, offset 1 centers the content and adds a margin on each side)
-->
<div class="container-fluid">
<div class="row-fluid">
<div class="span10 offset1">
<h1 class="well">
<b>Store </b>
</h1>
<!-- Click here to navigate to Store-->
<div ng-view ></div>
</div>
</div>
</div>
</body>
</html>

Please check the case of the variables, .id instead of .Id
{{product.id}} {{product.imageUrl}}{{product.name}}{{product.category}}

Anchor tag has precedence for href over ng-click and so that won't work.
I modifed my code as below:
<td >
<a ng-href="" ng-click="GetItemDetails(product.Id,window.location.href='/Name')"><b>{{product.Name}}</b></a><br /></td>

Error: [ng:areq] Argument 'ActsController' is not a function, got undefined

I keep getting the error: Error: [ng:areq] Argument 'ActsController' is not a function, got undefined. I've seen several other people have similar errors, usually due to typos. But I don't think I've misspelled the controller name anywhere.
I am working with Angular and Rails, by the way.
app.js
var controllers, snowball_effect;
snowball_effect = angular.module('snowball_effect', [
'templates',
'ngRoute',
'ngResource',
'controllers'
]);
snowball_effect.config([
'$routeProvider', function($routeProvider) {
return $routeProvider
.when('/', {
templateUrl: "static_pages/index.html",
controller: 'StaticPagesController'
})
.when('/acts/index', {
templateUrl: "acts/index.html",
controller: 'ActsController'
});
}
]);
controllers = angular.module('controllers', []);
controllers.controller("StaticPagesController", ['$scope', function($scope) {}]);
controllers.controller("ActsController", [
'$scope',
'$routeParams',
'$location',
'$resource',
function($scope,$routeParams,$location,$resource) {
$scope.acts = [
{
id: 1,
name: "Plant a Flower",
description: "Plant a flower in your garden or along the street."
inspires: 1
}
];
}]);
javascript/templates/acts/index.html
<div class="actions_body">
<h2>Listing Actions</h2>
<div ng-controller="ActsController" class="body">
<table class="row">
<thead>
<tr>
<th class="col-md-offset-1 col-md-2 active">
<label>Name</label>
</th>
<th class="col-md-4">Description</th>
<th class="col-md-2">Inspires</th>
<th colspan="2" class="col-md-2">Modify</th>
</tr>
</thead>
<tbody ng-repeat="act in acts">
<td class="col-md-offset-1 col-md-2">{{act.name}}</td>
<td class="col-md-4">{{act.description}}</td>
<td class="col-md-2">{{act.inspires}}</td>
<td>Edit</td>
<td>Delete</td>
</tbody>
</table>
<br>
New Action
</div>
</div>
Edit:
Now that I think about it, I'm also having another problem. Whenever I refresh the page, the main partial vanishes. I guess this question is more Rails/Angular specific.
views/home/index.html.erb
<div ng-app="snowball_effect">
<div class="view-container">
<div ng-include="'layouts/index.html'"></div>
</div>
</div>
assets/javascript/templates/layouts/index.html
<div ng-include="'layouts/navigation.html'"></div>
<div ng-view class="view-frame animate-view"></div>
assets/javascript/templates/static_pages/index.html
<div class="body">
<div class="container">
<div class="introduction">
<h1>Welcome to Snowball Effect</h1>
</div>
<div class="body">
<h2>A social media platform that brings people together in a spirit of community service.</h2>
</div>
</div>
</div>
So, in the layout/index.html, the navigation bar loads fine, but the ng-view only after the first page load.

Is app.js included in index.html??
<script src="js/app.js"></script>

AngularJS two-way binding in route templates when using routeProvider templates

I have an app where the sidebar will show a list of to do messages, and a list of processed messages (navigate with tabs), and clicking on it will show the details of the message on the main section to the right of the sidebar. The view on the right has some form inputs whwere the user fills out the details of the message, press a button, and the message is moved from to-do to processed.
<div id="sidebar" data-ng-controller="MessageController">
<ul class="nav nav-tabs" id="message-tab">
<li>To-do</li>
<li>Processed</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="to-do">
<table class="table table-hover">
<tr data-ng-repeat="message in todoMessages | orderBy: id">
<td>
<span>{{message.name}} </span> <small style="float:right;">{{message.type}}</small>
</td>
</tr>
</table>
</div>
<div class="tab-pane" id="processed">
<table class="table table-hover">
<tr data-ng-repeat="message in processedMessages | orderBy: id">
<td>
<span>{{message.name}} </span> <small style="float:right;">{{message.type}}</small>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="main-panel">
<div class="message-preview " data-ng-view="">
</div>
</div>
The problem I am having is that the main section on the right uses ng-view with the $routeProvider providing the template when the URL hash changes. When trying to update a $scope object in the template view, the sidebar's lists does not update.
app.js
var app = angular.module('messageApp', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/todo/:messageId',
{
controller: 'MessageController',
templateUrl: 'app/partials/todoView.html'
})
.when('/processed/:messageId',
{
controller: 'MessageController',
templateUrl: 'app/partials/processedView.html'
})
.otherwise({ redirectTo: '/' });
});
However, if I put the same markup that's in the sidebar into the template view, the two-way binding works properly as I can see that the list updates when manipulating the scope objects.
What am I doing wrong and how can I have the sidebar using ng-controller update properly?