I have a directive, form where the rest of the html is given. The directive is given below
THis is the html for directive
<div test
input="{{guage.input}}"
>
</div>
angular.module('test', [])
.directive('test', function () {
"use strict";
return {
restrict: 'A',
scope: {
input: '='
},
templateUrl: 'gauge/gauge.tpl.html',
replace: true
});
The below is the html loaded after the directive compilation.
<div ng-controller="Testing">
<div>
<div id="{{guageid}}" class="gauge ng-isolate-scope" ng-model="gauge.input" data-service="/api/getDataResult/core-mon-status" guageid="fleet_online" description="Fraction of fleet online" unit="%" test="{{gauge.test}}" input="{{gauge.input}}" gauge="">
</div>
</div>
</div>
Now I have a parent controller above this dom element name is Testing.
From my controller if I change the {{guage.input}} its not displaying.
This is my controller
app.controller('Testing',['$scope','newdataLoad','$timeout',function($scope, newdataLoad, $timeout){
$scope.gauge = {};
$scope.gauge.input = 0;
});
What is the problem with my scope here.
As your scope defines the input with = you dont need the expression brackets.
<div test input="guage.input">
Using expression brackets will break the 2-way binding.
Optimization:
You can completely move you controller into the directive and still make use of the dependency injection
"use strict";
angular.module('test', []).directive('test', function () {
return {
restrict: 'A',
scope: {
input: '='
},
templateUrl: 'gauge/gauge.tpl.html',
replace: true,
controller: function($scope, newdataLoad, $timeout){
$scope.gauge = {};
$scope.gauge.input = 0;
}
}
});
The template code then :
<div>
<div id="{{guageid}}" class="gauge ng-isolate-scope" ng-model="gauge.input" data-service="/api/getDataResult/core-mon-status" guageid="fleet_online" description="Fraction of fleet online" unit="%" test="{{gauge.test}}" input="{{gauge.input}}" gauge="">
</div>
</div>
Remove curlies:
<div test input="guage.input">
</div>
Related
I write a directive that provide a tab functionality, I use latest version of AngularJS (v1).
In my directive I have a controller that expose an api to a children directives, the scope is isolated in all directives:
Parent Directive
scope: {},
controller: function($scope) {
$scope.values = [];
this.addValue = function(value) {
$scope.values.push(value);
}
}
Child Directive on link function
scope: {},
transclude: true,
template: '<div ng-transclude></div>',
replace: true,
link: function(scope, element, attr, parentCtrl)
{
parentCtrl.addValues('test')
}
In child directive I have a custom html with own controller:
TestCtrl
function TestCtrl($scope){
var vm = this;
... other logic
}
Implementation
<parent>
<child>
<div ng-controller="TestCtrl as t">
<button ng-click="addValues('new_test')"></button>
</div>
</child>
</parent>
I need to call "addValues" method (inside directive controller) on click on my button.
How to organise the code to make this?
var module = angular.module('app', []);
module.controller('root', function ($scope) {
$scope.test = function () {
console.log('i am clicked');
}
});
module.component('child', {
template: '<button type="button" data-ng-click="$ctrl.click()">Click me</button>',
controller: myController,
bindings: {
onClick: '&'
}
});
function myController() {
var ctrl = this;
ctrl.click = function () {
this.onClick();
}
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head>
<body data-ng-app="app">
<div data-ng-controller="root">
<child data-on-click="test()"></child>
</div>
</body>
</html>
It is just an example
Here you can read more.
Hope this helps.
MAy be it will be usefull to read about angular's best practice here
I have a directive which I use in multiple places, however in one of the directives I need to match a value to show certain elements. The following doesn't work for me.
<my-directive attr="my.value"></my-directive>
And within the directive
<div ng-show="attr == 'my.value'"> Hello world </div>
Directive:
'use strict';
module.exports = Directive;
function Directive(){
return {
restrict: 'E',
templateUrl: 'directive.html',
scope: {
attr: '='
}
}
}
What am I doing wrong?
Can you pls try "#" for binding the value in directive it works for me
'use strict';
module.exports = Directive;
function Directive(){
return {
restrict: 'E',
templateUrl: 'directive.html',
scope: {
attr: '#'
}
}
}
The expression you use checks if attr scope is equal to the string 'my.value'.
If you want to check if it's equal to the value of my.value you got to use it this way.
<div ng-show="attr == my.value"> Hello world </div>
You have to do something like this
https://jsfiddle.net/pdhm98s3/6/
<div ng-app="miniapp">
<div ng-controller="myController">
<my-directive attr="my.value"></my-directive>
</div>
</div>
var app = angular.module('miniapp', []);
app.directive("myDirective", function() {
return {
"restrict": "E",
"replace": true,
"scope": {
"myValue": "=attr"
},
"template": '<div ng-show="myValue"> Hello world </div>'
}
})
app.controller("myController", function($scope) {
$scope.my = {
"value": 1
}
})
Test it by changing the value to 1 and 0 in the controller
I'm trying to use the ui-tinymce directive inside of another directive:
angular.module("risevision.widget.common.font-setting", ["ui.tinymce"])
.directive("fontSetting", ["$templateCache", function ($templateCache) {
return {
restrict: "AE",
template: $templateCache.get("_angular/font-setting/font-setting.html"),
transclude: false,
link: function ($scope, element, attrs) {
$scope.tinymceOptions = {
menubar: false,
statusbar: false
};
}
};
}]);
And _angular/font-setting/font-setting.html:
<div class="row">
<div class="col-md-12">
<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
</div>
</div>
The TinyMCE editor shows up, but it's ignoring the configuration options I've set in $scope.tinymceOptions. That is, the menu bar and status bar still show.
Any thoughts as to why it's not working?
Thx.
I know I'm late to the party but I'm going to answer you in case someone has the same issue and can't find the answer.
TinyMce needs to be loaded only when the tinymceOptions variable has data so you need to wrap it in an ng-if:
<div class="row">
<div class="col-md-12" ng-if="tinymceOptions">
<textarea ui-tinymce="$parent.tinymceOptions" ng-model="$parent.tinymceModel"></textarea>
</div>
</div>
You can avoid using $parent (elements inside ng-if have their own scope) using controller as inside the directive if you are using Angular >1.4:
app.directive('someDirective', function () {
return {
scope: {},
bindToController: {
someObject: '=',
...
},
controllerAs: 'ctrl',
controller: function () {
var ctrl = this;
ctrl.message = 'Object loaded.';
},
template: '<div ng-if="ctrl.someObject">{{ctrl.message}}</div>'
};
});
I trying to make a directive which accepting an attribute and hook it to the isolated scope, but the attribute value is not showing.
angular.module('app', [])
.controller('torrentController', [function() {
this.recommended = ['...'],
this.otherArray = ['...']
}])
.directive('torrentsTable', [function() {
return {
restrict: 'E',
templateUrl: 'templates/directives/torrentsTable.html',
scope: {
index: '='
},
controller: 'torrentController as torrentCtrl'
};
}]);
The idea is to use this directive to show different list of torrents with this syntax:
<torrents-table index="recommended"></torrents-table>
<torrents-table index="someOtherIndex"></torrents-table>
I wish this 2 almost same lines to show different "list" with results.
templates/directives/torrentsTable.html
<!-- I also tried with ng-repeat="torrent in torrentCtrl.recommended" -->
<!-- And is working as I excepted (It's shows the recommended array) -->
<div layout="row" ng-repeat="torrent in torrentCtrl[index]">
<div flex>Name: {{torrent.name}}</div>
<div flex>{{index}}</div>
</div>
{{index}} is not showing, and it's value is not showing.
While I actually make hardcoded ng-repeat arguments - it repeating but {{index}} is empty.
What I am doing wrong?
Your problem: how you pass key.
You use in directive:
scope: {
index: '='
},
so you should pass to directive expression, that evaluated to $scope property. So if you not inject scope - you pass undefined.
You can fix this two ways:
1) pass string instead something else
<torrents-table index="'recommended'"></torrents-table>
<torrents-table index="'someOtherIndex'"></torrents-table>
2) change directive definition to
scope: {
index: '#'
},
sample you can see in snippet below.
angular.module('app', [])
.controller('torrentController', [function() {
this.recommended = [1,2,3,4,5];
this.someOtherIndex = ['a','b','c','d','e'];
}])
.directive('torrentsTable', [function() {
return {
restrict: 'E',
template: '<div flex>{{index}}</div>'+
'<div layout="row" ng-repeat="torrent in torrentCtrl[index]">'+
' <div flex>Name: {{torrent}}</div>'+
'</div>',
scope: {
index: '='
},
controller: 'torrentController as torrentCtrl'
};
}])
.directive('torrentsTable2', [function() {
return {
restrict: 'E',
template: '<div flex>{{index}}</div>'+
'<div layout="row" ng-repeat="torrent in torrentCtrl[index]">'+
' <div flex>Name: {{torrent}}</div>'+
'</div>',
scope: {
index: '#'
},
controller: 'torrentController as torrentCtrl'
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app='app'>
<torrents-table index="'recommended'"></torrents-table>
<torrents-table index="'someOtherIndex'"></torrents-table>
<hr/>
<torrents-table2 index="recommended"></torrents-table2>
<torrents-table2 index="someOtherIndex"></torrents-table2>
</div>
I am trying to add another AngularJS directive to my app but for some reason it is not working. I have added other directives before in the same way but they are all working. I have posted code below.
HTML where I include the directive
<section class="section-wrap" data-ng-controller="PVProfileViewController">
<div class="container bg_white">
<div>
<pv-profile-password-reset pv-user="user"></pv-profile-password-reset>
</div>
<div>
<pv-profile-email-update pv-user="user"></pv-profile-email-update>
</div>
</div>
</section>
AngularJS directive file
'use strict';
/*
* The profile email request update section
*/
angular.module('mean.system').directive('pvProfileEmailUpdate',
['PVProfile', '$timeout', 'Global', 'Utilities',
function (PVProfile, $timeout, Global, Utilities)
{
function controller($scope)
{
$scope.global = Global;
$scope.darkout = false;
}
function link(scope, element, attrs)
{
}
return {
restrict: 'E',
templateUrl: '/path/to/profile_email_update.html',
link: link,
scope: {
user: '=pvUser'
},
controller: controller
};
}
]
);
Any ideas why this specific directive would not be working but others very similar to it would be?