Question

TLDR;我不想对两个输入框进行数据绑定，而是将变量从控制器传递给指令（其中包含一个控制器）。

目前我有以下

HTML页面
HTML模板
Javascript页面（控制器/指令）

我使用JS页面中的指令将模板注入HTML页面。

在HTML页面中，我在输入框旁边有一个按钮

INITIAL AMOUNT : <input type="text" class="text-right" ng-model="initialAmount">
<button ng-click="clicked()" class="btn btn-success btn-lg" style="margin: 5px;">Add Amount</button>

当我单击按钮时，我希望将输入框中的文本（initialAmount）传输到我在指令中创建的另一个输入框（来自模板）。

我尝试过使用$scope.displayArea = $scope.$parent.initialAmount; 在指令中虽然问题是当页面加载时没有点击按钮时设置。

我也试过在指令中使用范围但是没有用。

我的指令内部是一个控制器，它包含它执行的所有功能。

谢谢堆！

Answer 1

请尝试以下代码：

＆＃13;

var myApp = angular.module('myApp', []);
myApp.controller('myController',['$scope', function($scope){
  
}]);

myApp.directive('testDirective', [function () {
    return {
        restrict: 'A',
        template: `In Directive:<br/>
                  <input type="text" ng-model="amount"/>`,
        controller: function($scope){
          $scope.clicked = function(){
            $scope.amount = $scope.initialAmount;
          }
        }
    };
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  In Controller:<br/>
  <input type="text" class="text-right" ng-model="initialAmount"/>
  <button ng-click="clicked()" class="btn btn-success btn-lg" style="margin: 5px;">Add Amount</button>

  <div test-directive></div>
</div>

＆＃13;

Answer 2

试试此代码：

＆＃13;

var demo = angular.module('demo', []);
demo.directive('secondBox', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<input type="text" ng-model="secondTextBox"/>',
        controller:["$scope",function($scope){
            $scope.add=function(){
              $scope.secondTextBox=$scope.firstTextBox;
            }  
        }]
    }});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app='demo'>
    <div>
      <input type="text" ng-model="firstTextBox"/>
      <button ng-click="add($event)">Add Amount
      </button>
      <second-box></second-box>
    </div>
</div>

＆＃13;

按钮上的控制器将变量传递给指令单击

2 个答案: