使指令範圍對每個指令都是唯一的？

Question

我正在嘗試創建一個使用Angular動態構建表單域的組件（這是我的新手）。

控制器包含表單字段我將被觀看的數據作爲mainModel如下：

angular.module('formExample', []) 
    .controller('ExampleController', ['$scope', function ($scope) { 

    // build the scope dynamically 
    $scope.mainModel = { 
     "category_id": { 
      "name": "category_id", 
       "value": "1", 
       "label": "Category Id" 
     }, 
      "category_name": { 
      "name": "category_name", 
       "value": "First Category", 
       "label": "Category Name" 
     }); 

}]).directive('formLoader', function ($compile) { 

    function link(scope, ele, attrs) { 

     var html = ''; 
     jQuery.each(scope.mainModel, function (key, value) { 
      //display the key and value pair 
      console.log(key + ' --------------- ' + value); 

      if (key == 'category_id' || key == 'category_name') { 
       html += "<br />Testing<br /><kad-Input properties='mainModel." + key + "'></kad-Input>" 
      } 

     }); 

     var x = angular.element(html); 
     ele.append(x); 
     $compile(x)(scope); 

    } 

    return { 
     restrict: 'E', 
     scope: false, 
     link: link 
    }; 

}).directive('kadInput', function ($parse) { 
    return { 
     restrict: 'E', 
     //transclude: true, 
     scope: false, 
     templateUrl: 'tests.html', 
     link: function (scope, ele, attrs) { 

      scope.properties = $parse(attrs.properties)(scope); 
      console.log(scope.properties); 

     } 
    }; 
}); 

的想法是遍歷mainModel和建立動態基於主模型的形式，這是formLoader指令的作業，這是我將在我的HTML中調用的唯一的東西。

我創建了一個指令kadInput（只是用於測試），類似於一個「標籤：文本輸入」 HTML如下：

<div class="col-lg-2 col-md-2 col-sm-12 bottom-10" > 
    <h4 class="header_label" ><label for="productName"> {{properties.label}} </label></h4> 
</div> 

<div class="col-lg-9 col-md-9 col-sm-12" > 
    <input type="text" id="productName" ng-model="properties.value" class="form-control" /> 
</div> 

我得到所需要的結果，但問題是，kadInput的scope.properties並不是唯一的指令，它只是將最後設置的數據取出來。

如何讓每個指令的作用域保持與我的代碼相同的方面？

Answer 1

您在這裏做了很多不必要的事情，Angular指令爲您。我建議你仔細閱讀directives guide-這很容易理解。

這裏的相關要點是「隔離範圍」的概念，您明確選擇使用scope: false（順便說一句，它什麼也不做），然後手動從attrs讀取，這主要是否定指令的設計目的。

你想什麼是一個對象傳遞給scope，將指定要與單個參數的分離範圍：

scope: { 
    properties: '=' 
} 

這將設置數據綁定的你，和它將使範圍在您的指令的實例之間保持唯一。