如何在Angular指令中傳遞$ scope

我是AngularJS的新手。我想通過加減兩個數字來將模板返回給指令。我正在通過$scope功能，但它不工作。

這裏學習是代碼：

<html> 

<head> 
    <title>Angular JS </title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
</head> 

<body> 
    <div ng-app="Compl"> 
     <input type=number ng-model="no1" placeholder="Enter the First Number" /> 
     <input type=number ng-model="no2" placeholder="Enter the First Number" /> 
     <NoSum></NoSum> 
     <NoSub></NoSub> 
    </div> 
    <script> 
     var app = angular.module("Compl", []); 
     app.directive("NoSum", function($scope) { 
      return { 
       template: "Sum of Two Number" + ($scope.no1 + $scope.no2) 
      }; 
     }); 
     app.directive("NoSub", function($scope) { 
      return { 
       template: "Sub of Two Number" + ($scope.no1 - $scope.no2) 
      }; 
     }); 
    </script> 
</body> 

</html>

來源

2017-07-27 Chirag Suthar

您無法直接在您的指令中傳遞$ scope。相反，創建一個鏈接功能和使用範圍。欲瞭解更多詳情https://docs.angularjs.org/guide/directive – Vivz

如果您不使用隔離示波器，您應該可以直接在模板中使用no1和no2。假設這些變量在父範圍內。

<script> 
    var app = angular.module("Compl", []); 
    app.directive("noSum",function(){ 
     return{ 
      template : "Sum of Two Number {{(no1 + no2)}}" 
     }; 
    }); 
    app.directive("noSub",function(){ 
     return{ 
      template : "Sub of Two Number {{(no1 - no2)}}" 
     }; 
    }); 
</script>

您還應該重命名您的指令，因爲大寫字母在角度上有特殊含義。所以我改了個名字上面，你的HTML應該是這樣的：

<no-sum></no-sum> 
<no-sub></no-sub>

Here is a Plunker showing it working as expected

這工作，因爲沒有隔離範圍，將您的指令繼承其父，而你的情況是$rootScope的範圍。如果你使用了獨立的作用域，你將不得不通過html屬性傳遞變量。

來源

2017-07-27 07:13:08

謝謝先生。 –

你可以做的是

一）使用 '父範圍' ..的如此TE範圍包含您的指令的視圖控制器，如下所示：

 app.directive("NoSum",function($scope){ 
       return { 
       template: "Sum of Two Number" + (scope.no1 + scope.no2) //<-- don't use scope with $ ... but only scope 
       link: function(scope, element, attrs) { 
       element.bind('error', function() { 
        if (attrs.src !== attrs.errSrc) { 
         attrs.$set('src', attrs.errSrc); 
        } 
       }); 
      } 
     }; 
    });

2-使用「分離的範圍」 ..所以你強行通行範圍trought您的項目，像這樣：

 app.directive("noSum",function($scope){ 
        return { 
restrict:'EAC' 
        template: "Sum of Two Number" + (item.no1 + item.no2) //<-- here you use item and in html you use like: <no-sum item="myvarscoped"></no-sum> 
scope:{ item : "="} 
        link: function(scope, element, attrs) { 
        element.bind('error', function() { 
         if (attrs.src !== attrs.errSrc) { 
          attrs.$set('src', attrs.errSrc); 
         } 
        }); 
       } 
      }; 
     });

來源

2017-07-27 07:10:14

謝謝先生..但它不是與我的模塊... –

我猜這是行不通的，因爲'item'會未定義。 –

正如Vivz已經提到的，你不能傳遞範圍。最佳做法是在控制器/指令之間共享數據是使用工廠。有關特定示例，請參見this link。

來源

2017-07-27 07:12:44 blewherself

將屬性從父組件傳遞給子組件非常好。使用工廠/服務進行組件間通信是最佳實踐，如果您想在尚未處於父/子關係的組件之間共享數據。在這種情況下使用工廠將是過分的。 –

在這種情況下，我只能看到兩個相同級別的指令。就我而言，使用'$ rootScope'也不是最好的做法。但我同意在這種特殊情況下使用工廠是矯枉過正的。但如果您希望在未來的工廠和服務中擴展應用功能，那麼我認爲這是最佳選擇。 – blewherself

這兩個指令不互相通信，它們與父範圍進行通信。這種情況下的父作用域恰好是$ rootScope是無關緊要的。如果一個組件（或本例中的指令）是一個孩子，那麼父母通過屬性直接與孩子進行交流是最好的做法。這是最好的分離關係，因爲子組件不會有任何耦合。我們可以爭辯說，他應該使用孤立的範圍，但我不想讓事情複雜化，因爲問題作者仍然只是在學習。 –

如何在Angular指令中傳遞$ scope

回答

相關問題