评估自定义指令中的表达式 [英] Evaluate expression inside custom directive
问题描述
我为 $ scope controller 附加了一个参数对象，其中包含一系列键：值。我想要循环显示每个参数的名称和值，但在显示值之前，我想检查它是否是布尔值或 number 来决定< input> 标记的类型。
我是新来的 Angular.js 所以我真的不知道如何评估指令中的表达式。这是一个现场示例。
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.jsso 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>
推荐答案
展示如何根据你开始使用的方法实现）。
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>
这篇关于评估自定义指令中的表达式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
