AngularJS-获取一个输入值并将其传递给父指令作用域

AngularJS - Getting an input value and passing it to parent directive scope

本文关键字：作用域 指令 获取 输入 一个 AngularJS-      更新时间：2023-09-26

假设我有一个指令和一个控制器。

这是我的现场演示：http://embed.plnkr.co/LfLo0M8tVJyFNpJML5MU/

我正在尝试在Directive的模板中设置一个输入字段，您可以在其中键入一个单词，然后按Reverse来反转字符串并更新控制器的peractive。

但我在这条线上得到了：TypeError: Cannot read property 'split' of undefined at Scope.$scope.reverseName（26）：$scope.reversedName = $scope.getName.split("").reverse().join("");。

你可以查看上面的plunker链接，或者这里是我的代码：

app.js：

var app = angular.module('directive.main', []);
app.directive('myThing', function() {
  return {
    restrict: 'EA',
    controller: 'Controller',
    scope: {
      reverse: "&",
      name: "@",
      getName: "="
    },
    templateUrl: 'template.html'
  };
});
app.controller('Controller', ['$scope', function($scope) {
  $scope.getName = "Rudolph";
  $scope.reversedName = $scope.getName.split("").reverse().join("");
  $scope.reverse = function() {
    $scope.reversedName = $scope.getName.split("").reverse().join("");
    $scope.name = $scope.getName;
  };
}]);

template.html:

<div>Name:
  <input placeholder="Type to reverse the string atop!" type='text' ng-model="getName" />
</div>
<div>Reversed Name: {{reversedName}}</div>
<input type='button' ng-click='reverse()' value='Reverse Name' /> for {{getName}}

以及index.html:中的控制器

<body ng-controller="Controller">
  <div>
    <strong>Parent Scope:</strong>
    <br /> Name: {{getName}}
    <br />Reversed Name: {{reversedName}}
  </div>
  <br />
  <strong>Isolated Directive's Scope</strong>
  <my-thing reverse="reverseName()"></my-thing>
</body>

我做错了什么？为什么我的{{getName}}没有在父级中更新？但我不知道如何传递信息。

谢谢。

您遇到的问题是没有附加指令和控制器。因此，控制器不知道在指令模板的ng模型属性中定义的$scope.getName变量。我还删除了ng-controller属性，因为该指令将一个控制器锁存在其自身中。

我改变了模板和Angular代码，现在当你点击反向名称按钮时，你会得到反向名称。

app.js

var app = angular.module('directive.main', []);
app.directive('myThing', function() {
  var controller = ['$scope', function($scope) {
    $scope.name = "Well dude";
  }];
  return {
    restrict: 'EA',
    controller: 'Controller',
    scope: {
      reverse: "&",
      name: "@",
      getName: "="
    },
    templateUrl: 'template.html'
  };
});
app.controller('Controller', ['$rootScope', '$scope', function($rootScope, $scope) {
  $rootScope.getName = "Rudolph";
  $rootScope.reversedName = $rootScope.getName.split("").reverse().join("");
  $scope.reverse = function() {
    $scope.reversedName = $scope.getName.split("").reverse().join("");
    $scope.name = $scope.getName;
    $rootScope.reversedName = $scope.reversedName;
    $rootScope.getName = $scope.getName;
  };
}]);

template.html

<div>Name:
  <input placeholder="Type to reverse the string atop!" type='text' ng-model="getName" />
</div>
<div>Reversed Name:
  {{reversedName}}
</div>
<input type='button' ng-click='reverse()' value='Reverse Name' /> for {{getName}}

希望这对有帮助

相关文章：