angular js中的多個指令

Question

我想要，我在輸入文本框中鍵入內容，然后也將其顯示在div中。
但是它適用於第一部門，但不適用於第二部門。

我分為以下兩個部門：

<div class="fittext" max-font-size="100" text="myText"></div>
<div class="fittext_bottom" max-font-size="100" textb="myText"></div>

為此，我使用了以下角度的JS：

 var app_top = angular.module('plnkr', []); app_top.directive('fittext', function($timeout) { return { scope: { minFontSize_top: '@', maxFontSize_top: '@', text: '=' }, restrict: 'C', transclude: true, template: '<div ng-transclude class="textContainer" ng-bind="text"></div>', controller: function($scope, $element, $attrs) { var maxFontSize_top = $scope.maxFontSize_top || 50; var minFontSize_top = $scope.minFontSize_top || 8; // text container var textContainer = $element[0].querySelector('.textContainer'); // Add styles angular.element(textContainer).css('word-wrap', 'break-word'); // max dimensions for text container var maxHeight = $element[0].offsetHeight; var maxWidth = $element[0].offsetWidth; var textContainerHeight; var textContainerWidth; var fontSize = maxFontSize_top; var resizeText_top = function(){ $timeout(function(){ // set new font size and determine resulting dimensions textContainer.style.fontSize = fontSize + 'px'; textContainerHeight = textContainer.offsetHeight; textContainerWidth = textContainer.offsetWidth; if((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize_top){ // shrink font size var ratioHeight = Math.floor(textContainerHeight / maxHeight); var ratioWidth = Math.floor(textContainerWidth / maxWidth); var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth; fontSize -= shrinkFactor; resizeText_top(); }else{ } }, 0); }; // watch for changes to text $scope.$watch('text', function(newText, oldText){ if(newText === undefined) return; // text was deleted if(oldText !== undefined && newText.length < oldText.length){ fontSize = maxFontSize_top; } resizeText_top(); }); } }; }); app_top.directive('fittext_bottom', function($timeoutBtm) { return { scope: { minFontSize_btm: '@', maxFontSize_btm: '@', text: '=textb' }, restrict: 'C', transclude: true, template: '<div class="textContainer_bottom" ng-bind="textb"></div>', controller: function($scope, $element, $attrs) { var maxFontSize_btm = $scope.maxFontSize_btm || 50; var minFontSize_btm = $scope.minFontSize_btm || 8; // text container var textContainer_btm = $element[0].querySelector('.textContainer_bottom'); // Add styles angular.element(textContainer_btm).css('word-wrap', 'break-word'); // max dimensions for text container var maxHeight_btm = $element[0].offsetHeight; var maxWidth_btm = $element[0].offsetWidth; var textContainerHeight_btm; var textContainerWidth_btm; var fontSize_btm = maxFontSize_btm; var resizeText_btm = function(){ $timeoutBtm(function(){ // set new font size and determine resulting dimensions textContainer_btm.style.fontSize = fontSize_btm + 'px'; textContainerHeight_btm = textContainer_btm.offsetHeight; textContainerWidth_btm = textContainer_btm.offsetWidth; if((textContainerHeight_btm > maxHeight_btm || textContainerWidth_btm > maxWidth_btm) && fontSize_btm > minFontSize_btm){ // shrink font size var ratioHeight_btm = Math.floor(textContainerHeight_btm / maxHeight_btm); var ratioWidth_btm = Math.floor(textContainerWidth_btm / maxWidth_btm); var shrinkFactor_btm = ratioHeight_btm > ratioWidth_btm ? ratioHeight_btm : ratioWidth_btm; fontSize_btm -= shrinkFactor_btm; resizeText_btm(); }else{ } }, 0); }; // watch for changes to text $scope.$watch('textb', function(newTextB, oldTextB){ if(newTextB === undefined) return; // text was deleted if(oldTextB !== undefined && newTextB.length < oldTextB.length){ fontSize_btm = maxFontSize_btm; } resizeText_btm(); }); } }; }); 

對於第一類“ fittext”，它可以工作，但是對於第二類“ fittext_bottom”，則不能工作。
我使用了兩個指令，但是對於第二個指令卻不起作用。
請幫我解決！
如果我在上述JS編碼中錯了，請告訴我。

Answer 1

您還需要在指令fittextBottom其設置為fittextBottom 。

 var app_top = angular.module('plnkr', []); app_top.controller('MainCtrl', function($scope) { $scope.myText = 'myText'; $scope.myText_bottom = 'myText_bottom'; }); app_top.directive('fittext', function($timeout) { return { scope: { minFontSize_top: '@', maxFontSize_top: '@', text: '=' }, restrict: 'C', transclude: true, template: '<div ng-transclude class="textContainer" ng-bind="text"></div>', controller: function($scope, $element, $attrs) { var maxFontSize_top = $scope.maxFontSize_top || 50; var minFontSize_top = $scope.minFontSize_top || 8; // text container var textContainer = $element[0].querySelector('.textContainer'); // Add styles angular.element(textContainer).css('word-wrap', 'break-word'); // max dimensions for text container var maxHeight = $element[0].offsetHeight; var maxWidth = $element[0].offsetWidth; var textContainerHeight; var textContainerWidth; var fontSize = maxFontSize_top; var resizeText_top = function() { $timeout(function() { // set new font size and determine resulting dimensions textContainer.style.fontSize = fontSize + 'px'; textContainerHeight = textContainer.offsetHeight; textContainerWidth = textContainer.offsetWidth; if ((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize_top) { // shrink font size var ratioHeight = Math.floor(textContainerHeight / maxHeight); var ratioWidth = Math.floor(textContainerWidth / maxWidth); var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth; fontSize -= shrinkFactor; resizeText_top(); } else {} }, 0); }; // watch for changes to text $scope.$watch('text', function(newText, oldText) { if (newText === undefined) return; // text was deleted if (oldText !== undefined && newText.length < oldText.length) { fontSize = maxFontSize_top; } resizeText_top(); }); } }; }); app_top.directive('fittextBottom', function($timeout) { return { scope: { minFontSize_btm: '@', maxFontSize_btm: '@', text: '=textb' }, restrict: 'C', transclude: true, template: '<div class="textContainer_bottom" ng-bind="text"></div>', controller: function($scope, $element, $attrs) { var maxFontSize_btm = $scope.maxFontSize_btm || 50; var minFontSize_btm = $scope.minFontSize_btm || 8; // text container var textContainer_btm = $element[0].querySelector('.textContainer_bottom'); // Add styles angular.element(textContainer_btm).css('word-wrap', 'break-word'); // max dimensions for text container var maxHeight_btm = $element[0].offsetHeight; var maxWidth_btm = $element[0].offsetWidth; var textContainerHeight_btm; var textContainerWidth_btm; var fontSize_btm = maxFontSize_btm; var resizeText_btm = function() { $timeout(function() { // set new font size and determine resulting dimensions textContainer_btm.style.fontSize = fontSize_btm + 'px'; textContainerHeight_btm = textContainer_btm.offsetHeight; textContainerWidth_btm = textContainer_btm.offsetWidth; if ((textContainerHeight_btm > maxHeight_btm || textContainerWidth_btm > maxWidth_btm) && fontSize_btm > minFontSize_btm) { // shrink font size var ratioHeight_btm = Math.floor(textContainerHeight_btm / maxHeight_btm); var ratioWidth_btm = Math.floor(textContainerWidth_btm / maxWidth_btm); var shrinkFactor_btm = ratioHeight_btm > ratioWidth_btm ? ratioHeight_btm : ratioWidth_btm; fontSize_btm -= shrinkFactor_btm; resizeText_btm(); } else {} }, 0); }; // watch for changes to text $scope.$watch('text', function(newTextB, oldTextB) { if (newTextB === undefined) return; // text was deleted if (oldTextB !== undefined && newTextB.length < oldTextB.length) { fontSize_btm = maxFontSize_btm; } resizeText_btm(); }); } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="plnkr"> <div ng-controller="MainCtrl"> <input required ng-model="myText" name="text1" id="text1" maxlength="250" class="edit-text-inputbox" type="text" placeholder="Start type here (Top)..."> <input required ng-model="myText_bottom" class="edit-text-inputbox" type="text" placeholder="Start type here (Bottom)..." name="text2" id="text2" maxlength="250"> <div class="fittext" max-font-size="100" text="myText"></div> <div class="fittext_bottom" max-font-size="100" textb="myText_bottom"></div> </div> </div> 

Answer 2

您在第一個屬性中包含text ，在第二個屬性中textb ，以使屬性可以通過模型，但是在指令中它們都

 text: '='

只需將其更改為

 text: '=textb'