Question

我们说我有一个指令和一个控制器。

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

我试图在指令模板中设置一个输入字段，您可以在其中键入单词，然后按“反向”以反转字符串并更新控制器的内容。

但我收到了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}}未在父级中更新？但我不知道如何传递信息。

谢谢。

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 个答案: