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

问题描述：

假设我有一个指令和一个Controller。AngularJS - 获取输入值并将其传递给父指令范围

这是我的现场演示：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}}不在母公司更新？但我不确定如何传递信息。

谢谢。

答

您遇到的问题是指令和控制器未连接。因此，控制器不知道指令模板中ng-model属性中定义的$ scope.getName变量。我也删除了ng-controller属性，因为该指令锁定了一个控制器本身。

我改变了模板和Angular代码，现在当你点击Reverse Name按钮时，你会得到相反的名字。

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 - 获取输入值并将其传递给父指令范围

相关推荐