將按鈕上的變量傳遞給來自控制器的指令單擊

TLDR;我不想綁定兩個輸入框，而是將變量從控制器傳遞給指令（裏面有一個控制器）。將按鈕上的變量傳遞給來自控制器的指令單擊

目前我有以下

HTML頁面
HTML模板
JavaScript頁面（控制器/指令）

我注入模板到用一個指令的HTML頁面JS頁面。

在這裏，在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; ，但問題在於，當頁面加載時單擊此按鈕時會設置此問題。

我也試過在指令中使用範圍，但沒有奏效。

我的指令的內部是一個控制器，它擁有它執行的所有功能。

謝謝堆！

來源

2017-03-09 Ch4osCosmo

使用rootScope ???或本地存儲？ –

你需要顯示代碼，如果可能的話創建代碼片段<<>' – Satpal

你試圖做的事情是完全可能的，你能給我們多一點你的代碼嗎？ – remib

嘗試以下代碼：

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; 
 
      } 
 
     } 
 
    }; 
 
}]);

<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>

來源

2017-03-09 08:25:57 Mamun

完美！感謝堆。我認爲問題在於我試圖在父控制器和指令之間分割東西，它只是變得雜亂...... – Ch4osCosmo

嘗試此代碼：

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; 
 
      } 
 
     }] 
 
    }});

<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>

來源

2017-03-09 09:01:34 Amal

將按鈕上的變量傳遞給來自控制器的指令單擊

回答

相關問題