We Keep Coding

How to properly use the same AngularJS 1.5 component multiple times in a view?

I'm creating a set of widgets with AngularJS 1.5's new components. The problem is, when using the same widget multiple times, they somehow share their controller or scope. I thought one of the things about components was that their scope is completely isolated?
My main html template which hold the widgets:
<widget-list
title="Books"
class="col-xs-12 col-md-4">
</widget-list>
<widget-list
title="Movies"
class="col-xs-12 col-md-4">
</widget-list>
<widget-list
title="Albums"
class="col-xs-12 col-md-4">
</widget-list>
My widget template:
<div class="widget widget-list">
<div class="panel b-a">
<div class="panel-heading b-b b-light">
<h5>{{$widget.title}}</h5>
<div class="pull-right">
<button type="button" class="btn btn-default btn-sm" ng-click="$widget.doSomething()">
Do something
</button>
</div>
</div>
<div class="panel-content">
{{$widget.content || 'No content'}}
</div>
</div>
</div>
My widget component:
app.component('widgetList', {
templateUrl: 'template/widget/widget-list.html',
bindings: {
title : '#',
},
controllerAs: '$widget',
controller: function($timeout) {
$widget = this;
console.log('Title on init: ', $widget.title)
$timeout(function() {
console.log('Title after 3 seconds: ', $widget.title)
}, 3000)
$widget.doSomething = function() {
$widget.content = "Something";
}
}
});
When running my code, this is what my console looks like:
Title on init: Books
Title on init: Movies
Title on init: Albums
(3) Title after 3 seconds: Albums
Also after rendering, all three widgets display No content in their template. But, when clicking the doSomething() button in either one of the three widgets, only the content of the last widget updates to Something.
What is happening here? Why are my components not 'isolated'?

Looks like you have a global variable called $widget here, try this:
var $widget = this;
instead of
$widget = this;
It creates a mess since the $widget variable holds a reference to the controller that has been recently initialized, in this case to the controller of the third component.

The problem with your code is that you are declaring the $widget on window scope, that's why your controller prints the last value, bacause it was being overridden every time the controller was getting instantiated. Use a var $widget instead and your code will work fine.
The following snippet solves this issue:
angular.module('app', [])
.component('widgetList', {
templateUrl: 'template/widget/widget-list.html',
bindings: {
title: '#',
},
controllerAs: '$widget',
controller: WidgetListController
});
function WidgetListController($timeout) {
var $widget = this;
console.log('Title on init: ', $widget.title)
$timeout(function() {
console.log('Title after 3 seconds: ', $widget.title)
}, 3000)
$widget.doSomething = function() {
$widget.content = "Something";
}
}
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<widget-list title="Books" class="col-xs-12 col-md-4">
</widget-list>
<widget-list title="Movies" class="col-xs-12 col-md-4">
</widget-list>
<widget-list title="Albums" class="col-xs-12 col-md-4">
</widget-list>
<script type="text/ng-template" id="template/widget/widget-list.html">
<div class="widget widget-list">
<div class="panel b-a">
<div class="panel-heading b-b b-light">
<h5>{{$widget.title}}</h5>
<div class="pull-right">
<button type="button" class="btn btn-default btn-sm" ng-click="$widget.doSomething()">
Do something
</button>
</div>
</div>
<div class="panel-content">
{{$widget.content || 'No content'}}
</div>
</div>
</div>
</script>

How to remove underscores from json key value

I have a json file like
{
"Asian_Cities_Countries":[
{"name":"Beijing",
"country":"China"
},
{"name":"Ankara",
"country":"Turkey"
}
],
"European_Cities_Countries":[
{"name":"Paris",
"country":"France"
},
{"name":"Madrid",
"country":"Spain"
}
]
}
It is just a part of a json file the actual json is quite big.
I am fetching this json through angularjs and displaying it my html page as
<div class="panel-group" id="accordion">
<div ng-repeat="key in notSorted(items) track by $index" class="panel panel-default menu-panel" ng-init="value = items[key]" style="margin-bottom:10px;">
<a data-toggle="collapse" data-parent="#accordion" id="menu-link" href="#{{key}}">
<div class="panel-heading panel-types">
<h4 class="panel-title">
{{key}}
</h4>
</div></a>
<div id="{{key}}" class="panel-collapse collapsing menu-items">
<div ng-repeat="item in value">
<div class="row">
<div class="col-sm-12 col-lg-3">
<p class="item-name">
{{item.name}}
</p>
</div>
<div class="col-sm-12 col-lg-3">
<p>{{item.country}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
Now I want to remove underscores from the key value and replace it with blank spaces.How do i do it.
I tried {{key.replace('_',' ')}} . But it removes only the first underscore and not all of them.

var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
$scope.items = {
"Asian_Cities_Countries":
[
{"name":"Beijing","country":"China"},
{"name":"Ankara","country":"Turkey"}
],
"European_Cities_Countries":
[
{"name":"Paris","country":"France"},
{"name":"Madrid","country":"Spain"}
]
};
});
app.filter('removeUnderscores', [function() {
return function(string) {
if (!angular.isString(string)) {
return string;
}
return string.replace(/[/_/]/g, ' ');
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
<div ng-repeat="(key,value) in items track by $index" class="panel panel-default menu-panel" ng-init="value = items[key]" style="margin-bottom:10px;">
<a data-toggle="collapse" data-parent="#accordion" id="menu-link" href="#{{key}}">
<div class="panel-heading panel-types">
<h4 class="panel-title">
{{key | removeUnderscores}}
</h4>
</div></a>
<div id="{{key}}" class="panel-collapse collapsing menu-items">
<div ng-repeat="item in value">
<div class="row">
<div class="col-sm-12 col-lg-3">
<p class="item-name">
{{item.name}}
</p>
</div>
<div class="col-sm-12 col-lg-3">
<p>{{item.country}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
try this. use a filter similar this
app.filter('removeUnderscores', [function() {
return function(string) {
if (!angular.isString(string)) {
return string;
}
return string.replace(/[/_/]/g, ' ');
};
}])
and in html
{{key | removeUnderscores}}

Seems you forgot the global modifier, try this:
key.replace(/_/g,' ')
with "g" all occurences should be replaced

The AngularJS Docs specifically state that Angular Expressions don't include regular expressions.
Angular Expressions vs. JavaScript Expressions
Angular expressions are like JavaScript expressions with the following differences:
No RegExp Creation With Literal Notation: You cannot create regular expressions in an Angular expression.
-- AngularJS Developer Guide - Expressions
Instead use a custom filter as recommended by #hadijz
app.filter('removeUnderscores', [function() {
return function(string) {
if (!angular.isString(string)) {
return string;
}
return string.replace(/[/_/]/g, ' ');
};
}])
and in html
{{key | removeUnderscores}}

Just a question. Why aren't you processing the json file/data within a service? This much processing (especially string replacing) isn't meant to be done in either the HTML or the controller in AngularJS.
I'd recommend that you parse the json inside a service and then pass it to the controller. That's usually the best practice..
Please see this JSBIN for reference. Thank you

ng-click not working inside of ng-repeat

I have a directive that displays cards for the user. Each card has an 'aww' or 'naww' button. AngularJS goes through the ng-repeat and generates each card. When the user clicks that button I want the 'aww' or 'naww' value to increment for that particular card. Unfortunately, when I click the buttons now, nothing happens and the values remain at zero. How would I get the aww and naww values to increment for each individual card?
view1.html
<div class="container">
<div ng-repeat="animal in animals" my-animal="animal"></div>
</div>
view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope',function($scope) {
$scope.animals = [{'name':'Perry','animal':'Bird','awws':0,'nawws':0,
'image-url': 'https://goo.gl/Vtcvk5'},
{'name':'Max','animal':'Cat','awws':0,'nawws':0,
'image-url':'https://goo.gl/bqOQci'
},
{'name': 'Julian','animal':'Duck','awws':0,'nawws':0,
'image-url':'https://goo.gl/v9GyTz'
}];
$scope.add = function(item){
item = item + 1;
};
}])
.directive('myAnimal', function() {
return {
scope: {
item: '=myAnimal'
},
restrict: 'EA',
templateUrl: 'view1/card-template.html'
};
});
cardtemplate.html
<div class="card">
<img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
<div class="card-block">
<h4 class="card-title">{{item.name}}</h4>
<p class="card-text">{{item.animal}}</p>
<button type="button" ng-click="add(item.awws)" class="btn btn-success">Aww +1 </button>
{{item.awws}}
<button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
{{item.nawws}}
</div>
</div>

This is happening because '$scope.add' function of your controller isn't inside the scope of your myAnimal directive(which has an isolate scope).
Also, you are using the directive in a wrong way. my-animal is your directive and not an attribute for your directive. First, change your directive calling template to:
<div class="container">
<div ng-repeat="animal in animals" my-animal animal="animal" add="add"></div>
</div>
directive to:
.directive('myAnimal', function() {
return {
scope: {
item: '=animal',
add: '&' //method binding here
},
restrict: 'EA',
templateUrl: 'view1/card-template.html'
};
});
As you can see I have added another attribute which binds the 'add' function in your controller to the directive, thus making it available in the directive scope. & is used for achieving this.

Issue is you are passing literal value of aww in ng-click function, where as you should pass the item object and increment its item.awws property.
<div class="card">
<img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
<div class="card-block">
<h4 class="card-title">{{item.name}}</h4>
<p class="card-text">{{item.animal}}</p>
<button type="button" ng-click="add(item)" class="btn btn-success">Aww +1 </button>
{{item.awws}}
<button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
{{item.nawws}}
</div>
</div>
and in js...
$scope.add = function(item){
item.awws += 1;//it might be required to find the item in the collection and then increment it
};
}])
Or, the easiest would be to do it directly in HTML
<div class="card">
<img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
<div class="card-block">
<h4 class="card-title">{{item.name}}</h4>
<p class="card-text">{{item.animal}}</p>
<button type="button" ng-click="item.awws = item.awws + 1" class="btn btn-success">Aww +1 </button>
{{item.awws}}
<button type="button" ng-click="item.nawws = item.nawws - 1" class="btn btn-danger">Naww -1 </button>
{{item.nawws}}
</div>
</div>

How do I refresh my ng-repeat?

I have a controller (called "catalogueController") that manages my search box and my search page. I have the controller initially set the page to automatically call the search function defined in "catalogueController" when the app loads to pre-load my array of items (called Inventory) to be repeated via ng-repeat in the page.
The process runs like this:
1. I submit the search form.
2. "catalogueController" will send the search term to my factory (called "Search").
3. "Search" will have a function which will make a server call to query my database for that particular search.
4. The database will send the results of the search to the "Search" factory.
5. The "Search" factory will send the results to the "catalogueController" controller.
6. "catalogueController" will update the $scope.Inventory to be equal to the new result that I was received.
My problem is that ng-repeat does not refresh itself to display my new and updated $scope.Inventory array. $scope.Inventory definitely is updated (I have made sure of this through various console logs).
I have also tried to use $scope.$apply(). It did not work for me.
Thank you in advance for your help!
Here is my code:
HTML Template
<form role="search" class="navbar-form navbar-left" ng-controller="catalogueController" ng-submit="search(search_term)">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control" ng-model="search_term">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<main ng-view></main>
catalogue.html partial
<div id="main" class="margin-top-50 clearfix container">
<div ng-repeat="items in inventory" class="row-fluid">
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img src="image.jpg" alt="..." class="col-md-12">
<div class="caption">
<h3>{{ items.itemName }}</h3>
<p>{{ items.description }}</p>
<p>Buy <a href="#" role="button" class="btn btn-default">More Info</a></p>
</div>
</div>
</div>
</div>
"app.js" Angular App
var myApp = angular.module('qcbApp', ['ngRoute', 'ngCookies', 'appControllers']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'html/partials/login.html',
controller: 'registrationController'
}).
when('/sign-up', {
templateUrl: 'html/partials/sign-up.html',
controller: 'registrationController'
}).
when('/catalogue', {
templateUrl: 'html/partials/catalogue.html',
controller: 'catalogueController'
}).
when('/', {
templateUrl: 'html/partials/qcbhome.html'
}).
otherwise({
redirectTo: '/'
});
}]);
"catalogueController" Controller
myApp.controller('catalogueController', ['$scope', 'Search', function($scope, Search) {
var time = 0;
var searchCatalogue = function(search) {
$scope.inventory = null;
console.log("Controller -- "+search);
Search.searchCatalogue(search)
.then(function(results) {
console.log(results);
$scope.inventory = results;
});
};
if(time == 0)
{
searchCatalogue('');
time++;
}
$scope.search = function(term) {
searchCatalogue(term);
}
}]);
"Search" Factory
myApp.factory('Search', ['$http', '$q', function($http, $q) {
function searchCatalogue(term) {
var deferred = $q.defer();
console.log("Factory -- "+term);
$http.post('/catalogue_data', {term: term}, {headers: {'Content-Type': 'application/json'}})
.success(function(result) {
console.log(result[0].SKU);
deferred.resolve(result);
console.log("Factory results -- "+result);
});
return deferred.promise;
}
return {
searchCatalogue: searchCatalogue
}; //return
}]);

I think the problem is the ng-repeat can not access the inventory in scope. You have to create a div which contains both the form and the ng-repeat.
The html should be:
<div ng-controller="catalogueController">
<!-- Move the controller from the form to parent div -->
<form role="search" class="navbar-form navbar-left" ng-submit="search(search_term)">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control" ng-model="search_term">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<div id="main" class="margin-top-50 clearfix container">
<div ng-repeat="items in inventory" class="row-fluid">
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img src="image.jpg" alt="..." class="col-md-12">
<div class="caption">
<h3>{{ items.itemName }}</h3>
<p>{{ items.description }}</p>
<p>Buy <a href="#" role="button" class="btn btn-default">More Info</a></p>
</div>
</div>
</div>
</div>
</div>

I've seen the situation a few times where when you are updating a property directly on the $scope object there are interesting problems around databinding to that value (such as inventory). However if you databind to an object property of an object then the databinding works as expected. So for example use a property on $scope. I believe this is a copy by value vs copy by reference issue.
Update all your inventory references as follows
$scope.data.inventory = result;
Also don't forget to update your inventory reference in the html template:
<div ng-repeat="items in data.inventory" class="row-fluid">
Update: I made this plunk to figure it out - http://plnkr.co/edit/0ZLagR?p=preview
I think the primary problem is you have the controller specified twice. I removed it from the form and it started working.

angular.js two directives, second one does not execute

I have two directives defined in an angular.js module. The HTML element that is declared first executes its directive, but the second HTML element that uses the other directive does not execute it.
Given this HTML:
<div ng-app="myApp">
<div ng-controller="PlayersCtrl">
<div primary text="{{primaryText}}"/>
<div secondary text="{{secondaryText}}"/>
</div>
</div>
and this angular.js code:
var myApp = angular.module('myApp', []);
function PlayersCtrl($scope) {
$scope.primaryText = "Players";
$scope.secondaryText = "the best player list";
}
myApp.directive('primary', function(){
return {
scope: {
text: '#'
},
template: '<h1>{{text}}</h1>',
link: function(scope, element, attrs){
console.log('primary directive');
}
};
});
myApp.directive('secondary', function(){
return {
scope: {
text: '#'
},
template: '<h3>{{text}}</h3>',
link: function(scope, element, attrs){
console.log('secondary directive');
}
};
});
The resulting HTML is only the "primary" directive, and the "secondary" directive does not render:
<div ng-app="myApp" class="ng-scope">
<div ng-controller="PlayersCtrl" class="ng-scope">
<div primary="" text="Players" class="ng-isolate-scope ng-scope">
<h1 class="ng-binding">Players</h1>
</div>
</div>
</div>
The console output verifies this as well, as only the "primary directive" text is output.
Then if I switch the order of the primary and secondary elements, the secondary directive is executed and the primary directive is not:
<!-- reversed elements -->
<div secondary text="{{secondaryText}}"/>
<div primary text="{{primaryText}}"/>
<!-- renders this HTML (secondary, no primary) -->
<div ng-app="myApp" class="ng-scope">
<div ng-controller="PlayersCtrl" class="ng-scope">
<div secondary="" text="the best player list" class="ng-isolate-scope ng-scope">
<h3 class="ng-binding">the best player list</h3>
</div>
</div>
</div>
Why is this? What am I doing wrong?

div's are not void elements and require a closing tag.
<div ng-app="myApp">
<div ng-controller="PlayersCtrl">
<div primary text="{{primaryText}}"></div>
<div secondary text="{{secondaryText}}"></div>
</div>
</div>
Example