Evaluate Expression Inside Custom Directive
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
Solution 1:
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 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>
Solution 2:
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>
Solution 3:
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 + '>');
}
}
}
});
Solution 4:
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:
Post a Comment for "Evaluate Expression Inside Custom Directive"