Getters và getters động dạng ng-mô hình góc

Question

Tôi muốn sử dụng mô hình ng với mô hình dịch vụ bên ngoài. Mô hình này có hai phương thức: getValue (biến) và setValue (biến).

Vì vậy, trong html của tôi, tôi muốn để có thể làm:

<input type="text" ng-model="balance"> 

Lưu ý: Số dư không được định nghĩa trên phạm vi $ trong điều khiển của tôi. Và bởi vì chúng ta đang xử lý nhiều hơn 4000 biến khác nhau, tôi không muốn định nghĩa tất cả chúng trên phạm vi $.

Sau đó, thay đổi phải gọi phương thức setValue() của mô hình. Vì vậy, trong bộ điều khiển của tôi, tôi muốn có một cái gì đó như:

$catchAllGetter = function(variable) { // e.g. variable = 'balance' 
    var value = Model.getValue(variable); 
    return value; 
} 

$catchAllSetter = function(variable, value) { // called on change 
    Model.setValue(variable, value); 
} 

Điều gì đó tương tự với Angular?

Answer 1

Tiếp cận của tôi cũng tương tự như @ Dan Prince, nhưng việc thực hiện khác một chút

Tạo một chỉ thị, chấp nhận tên của biến mô hình, và sau đó tiêm mô hình của bạn dịch vụ trong chỉ thị chính nó để thực hiện việc nhận và thiết lập.

Edit: Theo quy định của @Werlang, viết một thuộc tính thay thế ngModel sẽ kiềm chế bạn khỏi các tính năng như xác nhận, định dạng, debounced cập nhật, ng-change vv Vì vậy, thay vì viết một sự thay thế, chúng tôi sẽ thay vào đó, hãy thêm một thuộc tính bổ sung

.

app.directive('dynamicInput', function() { 
     return { 
     restrict: 'A', 
     link: function(scope, el, attr) { 
       scope.variableName = angular.copy(attr.ngModel); // Saving the variable name 

       scope[attr.ngModel] = (attr.ngModel + '_1'); // Setting a dummy value in the scope variable. 
       // In your case it will look something like scope[attr.ngModel] = Model.getValue(attr.ngModel); 

       scope.$watch(attr.ngModel, function(newValue, oldValue) { 

        console.log(scope.variableName + " ==> " + newValue); 

        //Model.setValue(scope.variableName, newValue); 

       }); 

     } 
     }; 
    }) 

Sau đó, trong HTML của bạn:

<input ng-model='balance' dynamic-input /> 

Answer 2

Bạn có thể tạo chỉ thị mới triển khai hành vi này.

<input model-getter='getFn()' model-setter='setFn($value)' /> 

Đây sẽ là khá đơn giản để thực hiện:

app.directive('modelGetter', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     get: '&modelGetter', 
     set: '&modelSetter' 
    }, 
    link: function(scope, element) { 
     element.val(scope.get()); 
     element.on('change', function() { 
     var val = element.val(); 
     scope.set({ $value: val }); 
     }); 
    } 
    }; 
}) 

Answer 3

nhìn vào example, tôi tạo ra cho bạn. Tôi hy vọng tôi đã hiểu bạn một cách chính xác

$scope.$watch('variables', function(newValue) { 
    console.log("triggers on variables change"); 
    angular.forEach(newValue, function(value, key) { 
    Model.setValue(key, value); 
    }); 
}, true); 

Answer 4

Có tất cả các biến của bạn trong một mảng đối tượng:

[ 
    {key: "Variable 1", value: 1, kind: "number"}, 
    {key: "Variable 2", value: "some text", kind: "text"}, 
    {key: "Variable 3", value: new Date(), kind: "date"} 
] 

Sau đó, theo quan điểm của bạn, bạn sẽ tạo ra chúng với sự giúp đỡ của một ng- lặp lại:

<div ng-repeat="variable in myVariables"> 
    <input type="{{variable.kind}}" ng-model="variable.value" ng-change="changed(variable)"> 
</div> 

Nếu y Bạn cần cập nhật dịch vụ bên ngoài của bạn, thực hiện một phương thức đã thay đổi (biến) trong bộ điều khiển của bạn.

Answer 5

ngModel hỗ trợ getter và setters.Dưới đây là cách hoạt động:

<input ng-model="balance" ng-model-options="{ getterSetter: true }"> 

này hoạt động nếu balance là một hàm getter/setter:

$scope.balance(100);  // sets 100 
var b = $scope.balance(); // returns 100 

Bạn không cần để lộ mỗi biến trên phạm vi - bạn chỉ có thể tiếp xúc với các dịch vụ Model mà bạn sử dụng trong ví dụ của bạn:

$scope.Model = Model; 

sau đó, trong View, bám vào bất cứ tài sản mà bạn cần:

<input ng-model="Model.balance" ng-model-options="{ getterSetter: true }"> 

Answer 6

ES5 thuộc tính đối tượng để giải cứu:

Object.defineProperty($scope, 'balance', { 
    enumberable: true, 
    get: function() { 
    // -- call your getter here 
    }, 
    set: function (val) { 
    // -- call the setter here 
    } 
}); 

này có nguồn gốc Javascript, vì vậy nó không được nhanh hơn này.

Answer 7

Bạn có thể đánh giá chức năng mô hình của mình theo cách động, ví dụ:

<input type="text" ng-model="myModel(var)"> 

Và trong bộ điều khiển:

$scope.myModel = function(var) { 
    return function(newValue) { 
    // this is a regular model function but you can use 'var' here 
    ... 
    } 
}