AngularJS-获取输入值并将其传递给父指令范围

Question

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

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

我正在尝试在指令模板内输入一个字段，您可以在其中输入一个单词，然后按Reverse来反转字符串并更新控制器的角度。

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

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

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}}在父级中没有更新？ 但是我不确定如何传递信息。

谢谢。

Answer 1

您遇到的问题是指令和控制器未附加。 因此，控制器不了解指令模板中ng-model属性中定义的$ 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}}

希望这可以帮助

AngularJS-获取输入值并将其传递给父指令范围

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-12-02 19:04:18

AngularJS-获取输入值并将其传递给父指令范围

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-12-02 19:04:18

解决方案1
1 已采纳 2015-12-02 19:04:18