Question

我是一个新的AngularJS并且有一个简单的问题。

我想将<input type="text" ng-model="abc">中的值存储到另一个名为$scope.cde的范围中，并同时显示它们。目前，仅显示{{ abc }}，但不显示{{ cde }}。

为什么这不能使用此代码？ plnkr

HTML：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
    <script src="script.js"></script>
  </head>
  <body >
    <div ng-controller="ExampleCtrl">
      <h2>Scope Example</h2>
      <input type="text" ng-model="abc">
      <p>{{ abc }}</p>
      <p>{{ cde }}</p>
    </div>
  </body>

</html>

JS：

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

myApp.controller('ExampleCtrl', function ($scope) {

  $scope.cde = $scope.abc;

});

Answer 1

使用ng-change执行此操作

<input type="text" ng-model="abc" ng-change='cde = abc'>

Answer 2

如果您愿意，可以将指令与隔离范围一起使用：

<强> HTML

<body >
 <div ng-controller="ExampleCtrl">
  <h2>Scope Example</h2>
  <input type="text" ng-model="abc" placeholder="enter stuff here" x-change:scope="cde">
  <p><strong>abc scope:</strong> {{ abc }}</p>
  <p><strong>cde scope:</strong> {{ cde }}</p>
 </div>
</body>

<强> JS

myApp.directive('changeScope', function () {

  var controller = ['$scope', function ($scope) {
    $scope.setValue= function(abc){
      $scope.cde = abc;
    }
  }];

  var component = function(scope, element, attrs) {       
    scope.$watch('abc', function (v) {
      scope.setValue(v);
    });
  }

  return {
    link:       component,
    controller: controller,
    // Isolated scope
    scope:  {
      abc:  '=ngModel',
      cde: '=changeScope'
    }
  };

});

检查working plnkr！

将范围值保存在另一个范围内并同时显示

2 个答案: