Develop Reference

Angular component won't display

I have piece of html I want to show as a component, as I'm not manipulating the DOM.
As a directive it works fine, but as a component it doesn't. I have made components before with no problem, just can't see what the issue is here.
If I comment in the component code, and the directive out, it doesn't work.
Any idea what I've done wrong?
(function() {
"use strict";
angular
.module('x.y.z')
// .component('triangularStatus', {
// bindings: {
// value: '=',
// dimension: '=?'
// },
// templateUrl: '/path/to/triangular-status.html',
// controller: TriangularStatusController,
// controllerAs: 'vm'
// });
.directive('triangularStatus', triangularStatus);
function triangularStatus() {
var directive = {
scope: {
value: '=',
dimension: '=?'
},
replace: true,
templateUrl: '/path/to/triangular-status.html',
controller: TriangularStatusController,
controllerAs: 'vm',
};
return directive;
}
TriangularStatusController.$inject = [];
function TriangularStatusController() {
var vm = this;
}
})();

Here is the working code, most probably you are not using vm.values to access data.
Just be sure you are using right version of angular js ~1.5
(function(angular) {
angular.module('x.y.z', [])
.component('triangularStatus', {
bindings: {
value: '=',
dimensions:'=?'
},
template: '{{vm.value}} <br/> {{vm.dimensions}}' ,
controller: TriangularStatusController,
controllerAs: 'vm'
});
TriangularStatusController.$inject = [];
function TriangularStatusController() {
}
})(window.angular);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app = "x.y.z">
<triangular-status value="24" dimensions="348"></triangular-status>
</div>

The definition of your component, using bindings, is not directly equivalent to the definition of your directive, using scope, even though both are defined to use controllerAs. This is because your component will be binding directly to the controller, and your directive will be binding to $scope (by default).
I've used your code in the snippet below, slightly modified to allow the component and directive(s) to be used together. I've also added an additional directive that makes use of bindToController:true to demonstrate a directive that behaves a little more like a component in binding its attribute values directly to the controller, rather than to $scope.
I've also used a very basic shared template that attempts to show the bound attribute values by looking for them on $scope, followed by looking for them on vm (the ControllerAs).
(function() {
"use strict";
var templateBody = '<h2>$scope</h2>' +
'<p>value: {{value}}</p><p>dimension: {{dimension}}</p>' +
'<h2>vm</h2>' +
'<p>vm.value: {{vm.value}}</p><p>vm.dimension: {{vm.dimension}}</p>';
angular
.module('x.y.z', [])
.component('triangularStatusComponent', {
bindings: {
value: '=',
dimension: '=?'
},
template: '<div><h1>Triangular Status Component</h1>' + templateBody + '</div>',
controller: TriangularStatusController,
controllerAs: 'vm'
})
.directive('triangularStatusDirective', triangularStatusDirective)
.directive('triangularStatusDirectiveBound', triangularStatusDirectiveBound);
function triangularStatusDirective() {
var directive = {
scope: {
value: '=',
dimension: '=?'
},
replace: true,
template: '<div><h1>Triangular Status Directive</h1>' + templateBody + '</div>',
controller: TriangularStatusController,
controllerAs: 'vm',
};
return directive;
}
function triangularStatusDirectiveBound() {
//https://docs.angularjs.org/api/ng/service/$compile#-bindtocontroller-
var directive = {
scope: {
value: '=',
dimension: '=?'
},
bindToController: true,
replace: true,
template: '<div><h1>Triangular Status Directive Bound</h1>' + templateBody + '</div>',
controller: TriangularStatusController,
controllerAs: 'vm',
};
return directive;
}
TriangularStatusController.$inject = [];
function TriangularStatusController() {
var vm = this;
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="x.y.z">
<triangular-status-component value="'componentValue'" dimension="'componentDimension'">
</triangular-status-component>
<hr>
<triangular-status-directive value="'directiveValue'" dimension="'directiveDimension'">
</triangular-status-directive>
<hr>
<triangular-status-directive-bound value="'directiveValueBound'" dimension="'directiveDimensionBound'">
</triangular-status-directive-bound>
</div>
If you're finding that your code works as a directive, where your values are bound to $scope, but not as a component, where your values are bound to the controller, I would assume either your template html (most likely?) or your controller function are relying on trying to access your values as though they were on $scope. To confirm this, you may notice there are errors being logged to your javascript console that will help you zero in.

I think the only problem is, that your missing the brackets:
angular.module('x.y.z')
change to
angular.module('x.y.z', [])
https://docs.angularjs.org/api/ng/function/angular.module
As was mentioned in the comment, I need to clarify, the problem can be how are your JS files ordered or bundled, some other JS file executed later can overwrite this module and therefor you will not see any tag rendered.

Update UI based on change of a directive attribute in AngularJs

I am struggling with data binding in AngularJs.
I have the following piece of markup in .html file that includes the custom directive:
<my-directive ng-repeat="i in object" attr-1="{{i.some_variable}}"></my-directive>
Note: 'some-variable' is being updated every 10 seconds(based on the associate collection and passed to template through controller).
The directive's code includes:
myApp.directive('myDirective', function () {
scope: {
'attr-1': '=attr1'
which throws this exception because of the brackets in attr-1(see html code above).
It works though if I use read-only access(note at sign below):
myApp.directive('myDirective', function () {
scope: {
'attr-1': '#attr1'
I use scope.attr-1 in directive's HTML to show its value.
The problem is that with read-only access UI is not reflecting the change in attribute change.
I've found solution with $parse or $eval(couldn't make them work tho). Is there a better one there?

You'll need only two-way binding and I think $parse or $eval is not needed.
Please have a look at the demo below or in this fiddle.
It uses $interval to simulate your updating but the update can also come from other sources e.g. web socket or ajax request.
I'm using controllerAs and bindToController syntax (AngularJs version 1.4 or newer required) but the same is also possible with just an isolated scope. See guide in angular docs.
The $watch in the controller of the directive is only to show how the directive can detect that the data have changed.
angular.module('demoApp', [])
.controller('MainController', MainController)
.directive('myDirective', myDirective);
function MainController($interval) {
var self = this,
refreshTime = 1000; //interval time in ms
activate();
function activate() {
this.data = 0;
$interval(updateView, refreshTime);
}
function updateView() {
self.data = Math.round(Math.random()*100, 0);
}
}
function myDirective() {
return {
restrict: 'E',
scope: {
},
bindToController: {
data: '='
},
template: '<div><p>directive data: {{directiveCtrl.data}}</p></div>',
controller: function($scope) {
$scope.$watch('directiveCtrl.data', function(newValue) {
console.log('data changed', newValue);
});
},
controllerAs: 'directiveCtrl'
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController as ctrl">
model value in ctrl. {{ctrl.data}}
<my-directive data="ctrl.data"></my-directive>
</div>

I've come to the following solution(in case somebody runs into the the same problem):
// Directive's code
myApp.directive('myDir', function () { return {
restrict: 'E',
templateUrl: function () {
return 'my-dir.html';
},
scope: {
'id': '#arId',
'x': '#arX',
'y': '#arY',
//....
},
link: function ($scope, element, attrs) {
// *** SOLUTION ***
attrs.$observe('arId', function (id) {
$scope.id = id;
});
//...
}
Update: somebody sent me this answer, they have the same problem and came up with a very similar if not exact same solution:
Using a directive inside an ng-repeat, and a mysterious power of scope '#'
It is useful to read because they explain what's the idea behind it.

Pass directive attribute into linked controller?

I have a directive i'm using to do the same search filtering across multiple pages. So the directive will be using a service and get pretty hefty with code. Because of that I want to link to a controller instead of have the controller inside the directive like this:
.directive('searchDirective', function($rootScope) {
return {
restrict: 'E',
templateUrl:'searchtemplate.html',
controller: 'searchCtrl',
controllerAs: 'search'
};
});
I also want access to parent scope data inside the template, so I don't want to use a isolated scope.
Anyway here's what i'm not sure how to do. My directive looks like this:
<search-directive filter="foo"/>
How do I pass in the value in the filter attribute so that I can access it in my controller using $scope.filter or this.filter?
If I were using an isolated scope it'd be simple. If i had the controller in the same page I could use $attrs. But since i'm using a controller from another spot and don't want an isolated scope i'm not sure how to get the attrs values into the controller.
Any suggestions?

What about using the link function and passing the value to the scope?
return {
restrict: 'E',
templateUrl:'searchtemplate.html',
controller: 'searchCtrl',
controllerAs: 'search',
link: function (scope, element, attr) {
scope.filter = attr.filter;
}
};

searchDirective.js
angular
.module('searchDirective', []).controller('SearchCtrl', SearchCtrl)
.directive('SearchDirective', directive);
function directive () {
var directive = {
templateUrl:'searchtemplate.html',
restrict: "E",
replace: true,
bindToController: true,
controller: 'searchCtrl as search',
link: link,
scope: { filter:'=' } // <-- like so here
};
return directive;
function link(scope, element, attrs) {}
}
SearchCtrl.$inject = [
'$scope',
'$filter'];
function SearchCtrl(
$scope,
$filter) {
/** Init SearchCtrl scope */
/** ----------------------------------------------------------------- */
var vs = $scope;
// ....
Also I highly recommend checking out this AngularJS style guide, how you are writing your directive above is how I use to do it too. John Papa shows some way better ways: https://github.com/johnpapa/angular-styleguide
Directives:
https://github.com/johnpapa/angular-styleguide#directives
Controllers:
https://github.com/johnpapa/angular-styleguide#controllers

Flip the values of bindToController and scope around.
{
....
scope: true,
bindToController: { filter:'=' }
...
}
I have just hit the same issue over the weekend, and made a simple complete example here: bindToController Not Working? Here’s the right way to use it! (Angular 1.4+)

$scope.item in directive is undefined

I have a problem with my directive and controller. The variable item in scope is undefined in directive, even though I passed it in html. This is my code:
app.js:
var app = angular.module("app", ["ngRoute"]);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/main.html",
controller: "MainCtrl"
});
}]);
controller.js:
app.controller("MainCtrl", function($scope) {
$scope.item = "x";
});
directive.js:
app.directive("exampleDirective", function() {
return {
restrict: "A",
scope: {
item: "="
},
templateUrl: "views/item.html"
};
});
index.html:
<div ng-view></div>
main.html:
<div example-directive item="item"></div>
item.html:
<div>{{ item }}</div>
UPDATE
I changed my code to:
app.directive("exampleDirective", function() {
return {
restrict: "A",
scope: true,
templateUrl: "views/item.html"
};
});
and now there is "x" in scope.$parent.item. But why it isn't present inside directive?

Although it seems to work just fine with latest Angular stable http://plnkr.co/edit/6oXDIF6P04FXZB335voR?p=preview maybe you are trying to use templateUrl thats pointing to somewhere it doesn't exist.
Another thing, use primitives only when strictly needed. In case you ever need to modify value of item, you won't be able to do so since you are using a primitive. Plus, if you need "more info" to go inside your isolated scopes, and to avoid attribute soup (attr-this="that", attr-that="boop", my-otherstuff="anotheritem.member", etc) you can pass the two-way bind of an object that handle more data.
Or if you need to share state through multiple controllers, directives, etc, use a service instead and use dependency injection, and there's no need to pass in objects/primitives to your isolated scope, and you can assure state, and that's best practice "the Angular way".

This fiddle works: http://jsfiddle.net/HB7LU/2844/ which is essentially the same thing just without the route information.
var myApp = angular.module('myApp',[]);
myApp.directive("exampleDirective", function() {
return {
restrict: "A",
scope: {
item: "="
},
template: "<div>{{ item }}</div>"
};
});
function MyCtrl($scope) {
$scope.item = 'Superhero';
}
With the view:
<div ng-controller="MyCtrl">
<div example-directive item="item"></div>
</div>
This leads me to believe it could be a scope issue. So try encapsulating the controller scope variable in a container:
$scope.cont = { item: 'x' };
And in the view
<div example-directive item="cont.item"></div>

using expression for controller name(ng-controller) in a directive in AngularJS

Instead of specifying controller name using ng-controllerI want to specify controller name via an attribute in the directive and then replace it in the template(I want to do it this weird way just to explore AngularJS).
Here is the link to the plunk:
http://plnkr.co/edit/KZgLQ6?p=preview
e.g. of what I am trying to do
<sample-drtv ctrl-name="drtvCtrl"></sample-drtv>
template(sampleDrtv.html):
<div ng-controller="{{ctrlName}}">
<p>{{ptagcontent}}</p>
</div>
Directive code:
var myModule = angular.module('ng');
myModule.directive('sampleDrtv',[function(){
return {
restrict: "E",
replace: true,
templateUrl: "sampleDrtv.html",
scope: {},
controller: function($scope,$element,$attrs){
$scope.ctrlName = $attrs.ctrlName;
console.log($scope);
}
};
}]);
function drtvCtrl($scope){
$scope.ptagcontent = "AngularJS Rocks";
}
I am getting this error on my console:
Error: Argument '{{ctrlName}}' is not a function, got undefined
Any ideas on what should I do so that ctrlName is replaced in the expression? I am sure I do not understand concepts of directives completely and so I am doing a mistake?

I would recommend this structure :
<sample-drtv></sample-drtv>
template(sampleDrtv.html):
<div ng-controller="drtvCtrl">
<p>{{ptagcontent}}</p>
</div>
AngularJS Part:
var myModule = angular.module('ng');
myModule.directive('sampleDrtv',[function(){
return {
restrict: "E",
replace: true,
templateUrl: "sampleDrtv.html"
};
}]);
function drtvCtrl($scope){
$scope.ptagcontent = "AngularJS Rocks";
}
See the Plunk: http://plnkr.co/edit/GwnqK6?p=preview