使用屬性而不是服務在指令之間共享數據

我想制定一個基本上像專門輸入字段一樣的指令。在用戶輸入邏輯&後，'value'屬性將填充一串以逗號分隔的時隙（hh：mm）。使用屬性而不是服務在指令之間共享數據

變得

<time-slot value="01:00,02:00,03:00"></time-slot>

我想提供的靈活性的人放置在「值」屬性標籤的範圍參考 - 當該屬性值被更新，所以是範圍參考。（在下面的代碼中，myModel.times將在MyController作用域中）。

<div ng-controller="MyController"> 
    <time-slot value="{{ myModel.times }}"></time-slot> 
</div>

我在訪問指令中的'value'屬性時沒有問題。 但是，我沒有實現雙向綁定 - 即使在運行時檢查元素時屬性的內容已更改，myModel.times也不會捕獲更改後的值，即。我正在使用$ attrs。$設置來更改值屬性。

我不確定我是否在概念上缺少某些東西，或者只是缺少一些額外的語法。爲了保持這個指令模塊化和可共享，我不想使用服務在控制器和指令之間共享數據，也不想使用級聯範圍。我認爲這將是最佳的，如果屬性的值可以簡單地通過一個範圍變量被引用和根據需要使用的，很像一個簡單的輸入標籤：

<input ng-model="model.someText"></input>

來源

2013-07-31 louis w

我不知道這是可能實現這種方式 - 也許$ ATTRS $簡單的設置將覆蓋屬性值的刪除插值{{myModel.times }}。但是，您是否可以在控制器作用域與此隔離範圍之間使用具有隔離範圍和雙向數據綁定的指令？ –

在指令中，我認爲你使用的是@範圍而不是'='範圍 - 因此這兩個綁定不起作用 - 你沒有發佈你的指令的代碼，所以我只能做出假設...... – callmekatootie

我意識到我的代碼可能正在執行Esa規定的方式。使用@和=之間的主要區別是什麼？ –

具有雙向數據綁定的一個例子：參見plunkr。

angular.module('myApp', []) 
    .directive('timeSlots', function() {   
    return { 
     scope: { value: '=' },   
     link: function($scope, $elem, $attrs) { 
     // you can access $scope.value here (after it has been interpolated) 
     } 
    }; 
    }) 
    .controller('MainCtrl', ['$scope', function($scope) { 
    $scope.value = 42; 
    }]);

在HTML：

<div ng-controller="MainCtrl"> 
    <time-slots value="value"></time-slots>  
</div>

來源

2013-07-31 05:21:48

這正是我想要的。我首先想知道控制器作用域變量名是否必須是'value'，因爲指令作用域引用值： scope：{value：'='}，但是，'value'引用屬性名稱，而不是範圍變量。所以是的，這正是我所期待的。 –

使用屬性而不是服務在指令之間共享數據

回答

相關問題