评估自定义指令中的表达式

debugcn 发表于 Dev

利奥塔

我已将一个parameter对象附加到我的对象$scope controller，其中包含一系列keys: values。我想要做的是遍历每个参数并显示参数名称和值，但是在显示值之前，我想检查它是否为aboolean或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="[email protected]" 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>

达安·德斯梅特

我已经按照以下方式更新了您的代码（以快速展示如何根据您启动的方法来实现）。

查看更新的Plunker

// 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="[email protected]" 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。