Question

我是angular.js的新手。我的main.js文件中有两个指令，每个指令在模板中都有一个输入文本字段。有一个Html页面（index.html），我想使用这些指令的文本字段和另一个输入文本字段，这是一个Html输入文本字段。

现在我想要用户在指令的文本字段中给出的任何输入都应该计算字符数，并且应该在第三个文本字段中打印总和，该字段是Html文本字段。

代码如下： -

Main.js文件代码：

/// <reference path="angular.min.js" />    

var app = angular.module("myApp", []);

app.directive("textbox1", function() {
  return {
    restrict: 'E',
    scope: {
      timezone : "@"
    },
    template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval1' ng-change='updateval()' />{{txtval1.length}} </div>"
  }
});

app.directive("textbox2", function() {
  return {
    restrict: 'E',
    scope: {
      timezone: "@"
    },
    template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval2' ng-change='updateval()'/>{{txtval2.length}} </div>"
  }
});

app.controller("myCtrl", function ($scope) {
  $scope.updateval = function () {
    console.log($scope.txtval1.value);
    $scope.txtThird = ($scope.txtval1.length) + ($scope.txtval2.length);
  }
});

HTML网页代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
</head>
<body>

<div ng-app="myApp">
  <textbox1></textbox1>
  <textbox2></textbox2>
  <br/><br/>
  <input type="text" ng-model="txtThird"/>
</div>    

<script src="scripts/angular.min.js"></script>
<script src="scripts/main.js"></script>

</body>
</html>

Answer 1

你需要做这样的事情：

var app = angular.module("myApp", []);

app.directive("textbox1", function() {
  return {
    restrict: 'E',
    scope: {
      timezone : "@",
      updateval: "&updateval"
    },
    template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval1' ng-change=\"updateval({inputNr:'1', textval: txtval1})\" />{{txtval1.length}} </div>",
  }
});

app.directive("textbox2", function() {
  return {
    restrict: 'E',
    scope: {
      timezone: "@",
      updateval: "&updateval"
    },
    template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval2' ng-change=\"updateval({inputNr:'2', textval: txtval2})\" />{{txtval2.length}} </div>"
  }
});

app.controller("myCtrl", function ($scope) {
  $scope.inputValues = [
    {
      input: '1',
      value: ''
    },
    {
      input: '2',
      value: ''
    }
  ];
  $scope.updateval = function (inputNr, txtval) {
    var updatedInput = _.find($scope.inputValues, {input: inputNr});
    updatedInput.value = txtval;
    var lengthSum = 0;
    angular.forEach($scope.inputValues, function(inputObj){
      lengthSum += inputObj.value.length;
    });
    console.log(lengthSum);
  }
});

这是有效的：https://codepen.io/neptune01/pen/bWzLvq

请注意，我使用了lodash。

Answer 2

如果我理解你需要这个：

// index.html的

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
</head>
<body ng-app="myApp">

<div ng-controller="myCtrl">
  <textbox length="length1"></textbox>
  <textbox length="length2"></textbox>
  <br/><br/>
  <input type="text" ng-model="txtThird"/>
  <p>Sum = {{length1+length2}}</p>
</div>   

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="script.js"></script>

</body>
</html>

//的script.js

'use strict';
var app = angular.module("myApp", []);

app.directive("textbox", function() {
  return {
    restrict: 'E',
    scope: {
      length: '='
    },
    controller: function($scope){

    },
    template: "<div> <input type='text' style='background-color:orange; height=21px; width:151px;' ng-model='txtval' ng-change='length = txtval.length'/>{{txtval.length}} </div>"
  }
});

app.controller("myCtrl", function ($scope) {
  $scope.txtThird = "some text";
  $scope.length1 = 0;
  $scope.length2 = 0;
  $scope.updateval = function () {
    console.log($scope.txtval1.value);
    $scope.txtThird = ($scope.txtval1.length) + ($scope.txtval2.length);
  }

你可以在plunker上试试：https://plnkr.co/edit/XE6OcQX5GOJIPMcVHWum?p=preview

如何使用angular

2 个答案: