<div class="progressMain">
<div class="stocking progressWrap progress" data-progress-percent="33">
<div class="progressBar progress stocking"></div>
<div class="progressText">In Progress 3 of 7 steps</div>
</div>
</div>
I have data-progress-percent value in my directive scope but I am not sure how I can resolve scope value inside data-progress-percent.
I tried data-progress-percent={{value}} but it didn't work.
Any idea how I can resolve scope variable inside div class ?
Have a scope variable in your controller to be passed to your directive. Then use directive template to display the percent value(may be after some calculation in your directive link's function).
DEMO - http://plnkr.co/edit/8DZzSjcpDqRworpxQrAs
HTML:
<body ng-app="myApp" ng-controller="myController">
<div class="progressMain">
<div class="stocking progressWrap progress" progress-percent="percentValue">
</div>
</div>
<br/><br/>
<div>Enter percentage value to be passed to directive and used as in directive template:</div>
<br/>
<input type="text" ng-model="percentValue" />
</body>
JS:
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.percentValue = 33;
});
app.$inject = ['$scope'];
app.directive('progressPercent', function () {
return {
restrict: 'A',
template: '<div class="progressBar progress stocking"></div><div class="progressText">In Progress {{percentValue}} steps</div>'
};
});
Hope it helps.
Use $timeout(). It will solve your problem.
$timeout() will run in the next $digest cycle.
Related
I'm using angular js to produce to add an array and display it as we go along. So far the given code adds an array to the list but it doesn't keep adding the array with the press of the function.
I'm quite new to angular and i think there's something I'm missing but right now I'm stuck.
The html code has a button linked which is supposed to carry out the function.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = ["Testing Task 5.1", "Downloaded Task 5.1"];
$scope.addArray = function() {
$scope.records.unshift("saddfadffas")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl" class="container">
<p>
<h3>Status: </h3>
<input type="text" ng-model="additem">
<button ng-click="addArray()">function</button>
</p>
<ul ng-repeat="x in records">
<li>{{x}}</li>
</ul>
</div>
You can resolve this issue by having the items in your array be keyed by their position rather than their value. To do this, you can use track by $index. Hope this helps!
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = ["Testing Task 5.1", "Downloaded Task 5.1"];
$scope.addArray = function() {
$scope.records.unshift("saddfadffas")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl" class="container">
<p>
<h3>Status: </h3>
<input type="text" ng-model="additem">
<button ng-click="addArray()">function</button>
</p>
<ul ng-repeat="x in records track by $index">
<li>{{x}}</li>
</ul>
</div>
Try push rather thanunshift? Sorry I am not at my computer right now so can't verify this, but I'm pretty sure this will solve the problem
EDIT: Perhaps your intention is
$scope.records.unshift($scope.additem)
rather than
$scope.records.unshift("saddfadffas")
but I am assuming you are perhaps running into an error we can't see from the excerpt you posted.
I want to bind an array (customLayers) and use it for ng-repeat.
I fill the array inside the kv.colorMap Object.
I have three directives using these technique. But the directive updates the binded array on view ONLY after pressing a functionless button (checkResult), which is inside this directive.
Directive Template Code:
...
<div class="createInfo colorExprContainer">
<div ng-repeat="layer in customLayers">{{layer.color}}</div>
</div>
<div class="buttonWrapper text-center">
<button class="btn" ng-click="checkResult()">Ergebnis prüfen</button>
</div>
...
Directive JavaScript Code:
app.directive('boolKv', function($parse, $timeout){
return {
restrict: 'E',
replace:true,
scope:true,
templateUrl: "directives/boolKV/boolKV.html",
link: function($scope, $element, $attr) {
...
var kv = new BAKV({target: cv[0].id, expr: expr});
$scope.customLayers = kv.colorMap.layers;
...
$scope.checkResult = function(){console.log("it works!");};
});
Does someone have an idea?
Thank you very much!
Thank you MirMasej!
You were right, I was calling it after render. Maybe because I've used the EaselJs Library for canvas. I wanted to get the update after click on a block inside this canvas.
I solved it by adding, if someone has a better idea I would try it:
kv.colorMap.onChangedLayer = function(layer) {
$timeout(function(){
$scope.$apply();
});
};
Im calling this onChangedLayer event after changing the data inside the colorMap object.
I have an md-select that has inside it an md-option. In the md-option tag I have an ng-click that points to my function that is defined. The problem is that it seems to never get to my function when I click an option from the list.
Here is my html:
<div class="panel-body">
<md-select placeholder="{{getIntervalName()}}" ng-model="intervalSelected">
<md-option ng-repeat="item in intervals" value="{{item.name}}" ng-click="changeInterval(item)">
{{item.name}}
</md-option>
</md-select>
<div style="overflow: auto;">
<div id="parentDivChart" style="{{changeWidth()}};height:400px">
<canvas id="bar" class="chart chart-bar" chart-data="datta"
chart-labels="labels" chart-options="myoptions" chart-legend="legend">
</canvas>
<div tc-chartjs-legend chart-legend="legend"></div>
</div>
</div>
</div>
And this is my function defined in the controller:
function changeInterval(item) {
console.log("change intervaaaalll");
$scope.default_interval ="day";
intrvl = item.value;
setItem("interval", item.value);
$scope.loadChart();
};
It does not write to the console anything, that means it never reaches my function. Does anybody have an idea why ?
Thanks in advance!
It would have been better if you had provided the code where you create the controller.
However, I think you should create the method changeInterval(item) in this way:
var nameOfYourApp = angular.module(‘nameOfYourApp’, []);
nameOfYourApp.controller('nameOfYourController', function($scope) {
$scope.changeInterval = function(item) {
console.log("change intervaaaalll");
$scope.default_interval ="day";
intrvl = item.value;
setItem("interval", item.value);
$scope.loadChart();
}
});
Hope this helps!
As you want to use the changeInterval method on the scope you have to add it to the scope as follows:
In the controller:
$scope.changeInterval(item) {
console.log("change intervaaaalll");
$scope.default_interval ="day";
intrvl = item.value;
setItem("interval", item.value);
$scope.loadChart();
};
Don't forget to include $scope as a dependency for your controller.
E.g.:
app.controller('myCtrl', function($scope) {
});
Now as the changeInterval function is assigned to a variable on the scope it can be invoked on the view.
Since you changeInterval() is a private function to the controller, you can't access it. You need to make it public (bind it to a variable of the controller).
You should go with this approach:
$scope.changeInterval = changeIntervalapproach;
If you're using the view model approach with controllerAs then use:
vm.changeInterval = changeInterval;
Write "$scope.changeInterval=changeInterval;" in your controller
or
use "$scope.changeInterval=function (item) {...};"
Have simple directive
.directive('test', function () {
return {
templateUrl: 'dir.html',
scope: {
date: '='
},
link: function (scope, element, attrs) {
element.find('.date-picker').attr('type', 'email');
}
};
});
And simple template for directive
<div ng-if="date">
<h1>Date is true</h1>
<input class="date date-picker" type="text"/>
</div>
<div ng-if="!date">
<h1>Date is false</h1>
</div>
I want to do smth with child element inside any div with ng-if.
My code https://plnkr.co/edit/ewHfBj6SjCss1cs4CsY7?p=preview
You can add an watch to the date and then execute the code you want to run when it changes.
scope.$watch('date', function(dateValue){
if(dateValue){
//Code to run if true
}else{
// code to run if false
}
});
I have an HTML element which I annotated with an angular directive, in this case translate from ngTranslate. ngTranslate gives the option to interpolate values in the translation string at runtime with arbitrary angular expressions (and even a subcompile option for compiling containes directives).
Now my problem is I would like to interpolate {{name}} in the message Hello {{name}} with a custom directive <test blah="'Robert'"></test>. That is, in the end I expect to get the following HTML as output from the example below:
<body>
<div ng-controller="Ctrl">
<p translate="VARIABLE_REPLACEMENT" translate-values="{ name: '<test blah="'Test'"></test>' }" translate-compile>Hi <span>Hello Robert</span></p>
<span>Hello Robert</span>
</div>
</body>
JS Code:
var translations = {
VARIABLE_REPLACEMENT: 'Hi, {{name}}'
};
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
// add translation table
$translateProvider
.translations('en', translations)
.preferredLanguage('en');
}]);
app.controller('Ctrl', ['$scope', function ($scope) {
}]);
app.directive('test',function () {
return {
restrict: 'E',
template: '<span>Hello {{blah}}</span>',
replace: true,
scope: {
blah: '='
}
};
});
HTML (relevant part):
<body>
<div ng-controller="Ctrl">
<p translate="VARIABLE_REPLACEMENT" translate-values="{ name: '<test blah="'Robert'"></test>' }" translate-compile></p>
<test blah="'Robert'"></test>
</div>
</body>
You can play with it in this Plunker: http://plnkr.co/edit/FQZS4eaZVm52sbVzQ1xb?p=preview
The problem: Passing an HTML element through the attribute of another HTML element results in parsing problems with ". I tried to escape the "(\") of the attribute of the element that is passed in but that doesn't seem to work either. How can I pass an HTML element with attributes through the attribute of another HTML element?