我的指令範圍定義有什麼問題？

我的表格中有幾個<select>字段。我想動態地加載這些選項，所以我使用ng-repeat遍歷可以隨數據對象一起移動的選項列表。我的指令範圍定義有什麼問題？

若要使此功能的可重用性，我斷絕這個代碼段，並創建一個指令：

的javascript：

angular.module("ngFamilyTree") 
    .directive("selectInput", function(){ 
     return { 
      restrict: "E", 
      templateUrl: "templates/directives/selectInput.html", 
      scope: { 
       element: "=", 
       options: "=", 
       change: "=" 
      } 
     }; 
    });

模板/指令/ selectInput.html：

<select ng-model="element" class="form-control"> 
    <option ng-repeat="(text, value) in options" value="{{value}}">{{text}}</option> 
</select>

在主要形式中，我在各個地方使用以下指令元素：

<select-input element="docCntl.document.type" options="docCntl.document.typeOptions"></select-input> 

<select-input element="docCntl.document.category" options="docCntl.categoryOptions" change="docCntl.document.updateSubCategoryOptions()"></select-input> 

<select-input element="docCntl.document.subcategory" options="docCntl.subCategoryOptions"></select-input>

我覺得奇怪的是，第一個例子中，我將元素設置爲「docCntl.document.type」的作品完美無缺。每次我改變select的值時，對應元素的值都會在模型對象中改變。但是，第二項和第三項不會更改模型值。

此外，我已經嘗試過這個，沒有「更改」屬性。這樣做的目標是能夠設置更新功能，在類別更改時更改子類別的可用選項。

注：我有意將類別選項和子類別選項存儲在docCntl中而不是docCntl.document中;這就是爲什麼它們與可用於類型選擇器的選項有所不同。

注2：在初始頁面加載時，類別和子類別正確加載了正確的選項。

來源

2016-04-03 Jared Clemence

你看過this嗎？您可以使用ng-options指令來實現相同的結果。

您可以使用這樣的事情在你的標記 -

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

在控制器中相應的腳本應該是這樣的 -

$scope.items = [{ 
    id: 1, 
    label: 'aLabel', 
    subItem: { name: 'aSubItem' } 
}, { 
    id: 2, 
    label: 'bLabel', 
    subItem: { name: 'bSubItem' } 
}];

希望這幫助:)

來源

2016-04-03 05:39:39 atefth

嘗試這種解決方案http://plnkr.co/edit/wdKObUItDMqLyVx1gObS?p=preview

添加父範圍對象的指令。你可以使用根作用域，但這不是一個好習慣。請注意添加parentScope，鏈接和級聯。

ngFamilyTree.directive("selectInput", function() { 
 
return { 
 
    restrict: "E", 
 
    templateUrl: "templates/directives/selectInput.html", 
 
    scope: { 
 
     element: "=", 
 
     options: "=", 
 
     change: "=", 
 
     parentScope: "=" 
 
    }, 
 
    link: function(scope) { 
 
     scope.cascade = function(val) { 
 
     if (typeof scope.change === 'function') { 
 
      scope.change(scope.parentScope, scope.element); 
 
     } 
 
     }; 
 
    } 
 
}; 
 
});

2。改變指令模板調用級聯功能

<select ng-model="element" class="form-control" ng-change="cascade()"> 
 
     <option ng-repeat="(text, value) in options" value="{{value}}">{{text}}</option> 
 
    </select>

在控制器中，使updateSubCategoryOptions起作用無國籍並通過一種方式來訪問主子類別列表和當前選擇的類別

$scope.docCntl.document.updateSubCategoryOptions = function(docCntlIn, category){docCntlIn.subCategoryOptions=docCntlIn.categorySubCategories[category];}

來源

2016-04-03 19:29:07

我的指令範圍定義有什麼問題？

回答

相關問題