Evaluate expression inside custom directive
Question
I have attached a parameter object to my $scope controller , which contains a series of keys: values . What I want to to is to loop trough each of them and display the parameter name and value, but before displaying the value I want to check if it's a boolean or number to decide the type of the <input> tag. I'm new to Angular.js so I'm don't really know how to evaluate expression inside a directive. Here's a live example .
script.js
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function ($scope){
$scope.name = "myObject";
$scope.parameters = [
{parm0: 45},
{parm1: 4.9},
{parm2: true},
{parm3: false}
];
});
myApp.directive('myInputDirective', function () {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function (scope, element, attrs) {
if (typeof scope.current === "number") {
element.append('<p>{{key}}</p><input type="range" value="{{value}}">');
} else {
element.append('<p>{{key}}</p><input type="checkbox" value="{{value}}">');
}
}
}
});
index.html
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h3>
{{name}}
</h3>
<ul ng-repeat="(key, value) in parameters" ng-init="current = value">
<my-input-directive></my-input-directive>
</ul>
</div>
</body>
</html>
4 answers
solution1
1 ACCPTED 2016-07-15 12:04:43
I've updated your code as following (to quickly show how to achieve according you're started method).
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function ($scope){
$scope.name = "myObject";
$scope.parameters = {
parm0: 45,
parm1: 4.9,
parm2: true,
parm3: false
};
});
myApp.directive('myInputDirective', function () {
return {
restrict: 'E',
scope: {
current: '=',
key: '='
},
replace: false,
link: function (scope, element, attrs) {
element.append('<p>' + scope.key + '</p>');
if (typeof(current) === "number") {
element.append('<input type="range" value="' + scope.current + '">' + scope.current + '</input>');
} else {
element.append('<input type="checkbox" value="' + scope.current + '">' + scope.current + '</input>');
}
},
template: '<div></div>'
}
});
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h3>
{{name}}
</h3>
<ul ng-repeat="(key, value) in parameters">
<my-input-directive current="value" key="key"></my-input-directive>
</ul>
</div>
</body>
</html>
solution2
0 2016-07-15 11:53:19
Isolate the scope and add a property:
myApp.controller('MyController', function ($scope){
$scope.name = "myObject";
$scope.parameters = [45, 4.9, true, false];
});
myApp.directive('myInputDirective', function () {
return {
restrict: 'E',
replace: true,
scope: {
myValue: "=",
myKey: "="
},
template: '<div><p>{{myKey}}</p><input type="{{inputType}}" value="{{myValue}}"></div>',
link: function (scope, element, attrs) {
if (typeof scope.myValue === "number") {
scope.inputType = "range";
} else {
scope.inputType = "checkbox";
}
}
}
});
html:
<body>
<div ng-controller="MyController">
<h3>
{{name}}
</h3>
<ul ng-repeat="(key, value) in parameters" ng-init="current = value">
<my-input-directive my-value="value" my-key="key"></my-input-directive>
</ul>
</div>
</body>
solution3
0 2016-07-15 12:25:18
Plunker: https://plnkr.co/edit/IaTjhMyvo8u9ixCHuXGT
I made some changes on your JS code:
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function ($scope){
$scope.name = "myObject";
$scope.parameters = [
{parm0: 45},
{parm1: 4.9},
{parm2: true},
{parm3: false}
];
});
myApp.directive('myInputDirective', function () {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function (scope, element, attrs) {
var key = Object.keys(scope.current)[0];
var value = scope.current[key];
if (typeof value === "number") {
element.append('<p>' + key + '</p><input type="range" value="' + value + '">');
} else {
var checked = value ? ' checked' : '';
element.append('<p>' + key + '</p><input type="checkbox" ' + checked + '>');
}
}
}
});
solution4
0 2016-07-15 12:29:27
Cleaner way of doing the same thing:
myApp.directive('myInputDirective', function () {
return {
restrict: 'E',
scope: {
current: '=',
key: '='
},
replace: false,
link: function (scope, element, attrs) {
if (typeof(scope.current) === "number")
scope.type = "range";
else
scope.type = "checkbox";
},
template: '<div><p>{{key}}</p><input type="{{type}}" value="value">{{current}}</input></div>'
}
});
updated plunkr:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to evaluate Angular expression in child directive and expose it on parent directive?
Custom directive: How evaluate bindings with dynamic HTML
Custom directive using comprehension expression
AngularJS + highlight.js (to evaluate string with expression in directive)
Evaluate expression inside js function argument
Angular UI directive inside custom directive
Angular Directive Does Not Evaluate Inside ng-repeat
When does ngClass evaluate functions / How to mimic this in custom directive
AngularJS custom attribute does not evaluate first time directive runs
Getting custom directive inside div
Related Tags