[英]Evaluate expression inside custom directive
我在$scope controller附加了一个parameter对象，该对象包含一系列keys: values 。 我想要的是循环遍历它们中的每一个并显示参数名称和值，但是在显示值之前，我想检查是否是boolean或number来确定<input>标记的类型。 我是Angular.js所以我真的不知道如何在指令中评估表达式。 这是一个生动的例子 。
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>
我已经按照以下方式更新了您的代码（以快速展示如何根据您启动的方法来实现）。
// 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>
隔离范围并添加属性：
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>
柱塞： https ://plnkr.co/edit/IaTjhMyvo8u9ixCHuXGT
我对您的JS代码进行了一些更改：
// 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 + '>');
}
}
}
});
做同一件事的更干净的方法：
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>'
}
});
更新的plunkr：
如何在子指令中评估Angular表达式并在父指令中公开它？
[英]How to evaluate Angular expression in child directive and expose it on parent directive?
AngularJS + highlight.js（用指令中的表达式计算字符串）
[英]AngularJS + highlight.js (to evaluate string with expression in directive)
ngClass何时评估函数/如何在自定义指令中模仿
[英]When does ngClass evaluate functions / How to mimic this in custom directive
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.