Sto lavorando a un progetto in cui vorrei incapsulare una libreria direttiva e distribuirla ad altri sviluppatori da usare. Vorrei mantenere le modifiche al modello all'interno di questo codice incapsulato, quindi non voglio davvero che lo sviluppatore modifichi le variabili scope al di fuori della lib.
Nel mio codice, ho 2 diversi approcci per comunicare con la mia lib dal controller genitore.
La prima teoria è quella di creare una libreria che contenga una direttiva e un servizio. Il controller genitore chiamerebbe il servizio, che gestirà tutte le modifiche al modello lib e la direttiva reagirà in base a queste modifiche.
La seconda teoria consiste nel mettere tutte le funzioni per cambiare il modello nella direttiva stessa e chiamare lo scope direttiva sul genitore per apportare le modifiche.
Ecco un plunker che mostra ciò che sto chiedendo in modo più dettagliato. È un semplice esempio, ma illustra i 2 diversi metodi.
Mi sto appoggiando al secondo metodo in quanto sembra più pulito da implementare da uno scenario di sviluppo.
Qualche consiglio degli esperti angolari là fuori?
Plunker Html:
<body ng-app="myApp">
This is Example 1 - Using a service to modify directive
<div ng-controller="Example1Ctrl">
<example1-directive ng-model='example1Model'></example1-directive>
<br>
<br>
<input type="button" value="Change Example 1" ng-click='changeExample1()' />
</div>
<br>
<br>
This is Example 2 - Modifying directive in the scope of the directive
<div ng-controller="Example2Ctrl">
<example2-directive ng-model='example2Model'></example2-directive>
<br>
<br>
<input type="button" value="Change Example 2" ng-click='changeExample2()' />
</div>
</body>
Plunker js
var app = angular.module("myApp", []);
//--------------------------------------------------
//-------- This is example 1
//--------------------------------------------------
app.controller("Example1Ctrl", function($scope, example1Svc) {
$scope.example1Model = {
value: "Example 1 - Original Value"
}
$scope.changeExample1 = function() {
example1Svc.change($scope.example1Model, "Example 1 - Changed Value");
}
});
/// This part would be encapsulated in a lib
app.directive("example1Directive", function() {
return {
restrict: "E",
scope: {
model: "=ngModel"
},
template: "{{model.value}}"
}
});
app.service("example1Svc", function() {
this.change = function(example1Model, newValue) {
example1Model.value = newValue;
}
})
// End lib
//--------------------------------------------------
//-------- This is example 2
//--------------------------------------------------
app.controller("Example2Ctrl", function($scope, example1Svc) {
$scope.example2Model = {
value: "Example 2 - Original Value"
}
$scope.changeExample2 = function() {
$scope.example2Model.change("Example 2 - Changed Value");
}
});
/// This part would be encapsulated in a lib
app.directive("example2Directive", function() {
return {
restrict: "E",
scope: {
model: "=ngModel"
},
template: "{{model.value}}",
controller: function ($scope) {
$scope.model.change = function(newValue) {
$scope.model.value = newValue;
}
}
}
});
// end lib