SORU
20 ŞUBAT 2014, PERŞEMBE


Açısal: denetleyicileri arasında veri Paylaşımı

Denetleyicileri arasında veri paylaşmak için çalışıyorum. Use-case multi-step form, veri girişi girilen daha sonra orijinal denetleyicisi dışında birden çok görüntü yerlerde kullanılır. Ve jsfiddle here aşağıdaki kodu.

HTML

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="FirstName"><!-- Input entered here -->
    <br>Input is : <strong>{{FirstName}}</strong><!-- Successfully updates here -->
</div>

<hr>

<div ng-controller="SecondCtrl">
    Input should also be here: {{FirstName}}<!-- How do I automatically updated it here? -->
</div>

JS

// declare the app with no dependencies
var myApp = angular.module('myApp', []);

// make a factory to share data between controllers
myApp.factory('Data', function(){
    // I know this doesn't work, but what will?
    var FirstName = '';
    return FirstName;
});

// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

Herhangi bir yardım büyük beğeni topluyor.

CEVAP
20 ŞUBAT 2014, PERŞEMBE


Basit bir çözüm fabrika nesneyi döndürmek ve denetleyicileri aynı nesne için bir referans olarak hareket edelim.

JS:

myApp.factory('Data', function () {
    return { FirstName: '' };
});

myApp.controller('FirstCtrl', function ($scope, Data) {
    $scope.Data = Data;
});

myApp.controller('SecondCtrl', function ($scope, Data) {
    $scope.Data = Data;
});

HTML:

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="Data.FirstName">
  <br>Input is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{Data.FirstName}}
</div>

Demo:http://jsfiddle.net/HEdJF/

Uygulamalar, daha büyük, daha karmaşık ve test etmek için daha zor olacak zaman fabrikaya bu şekilde tüm nesneyi göstermek, ancak alıcı ve ayarlayıcıları aracılığıyla örneğin sınırlı erişim vermek yerine istemeyebilirsiniz:

myApp.factory('Data', function () {

    var data = {
        FirstName: ''
    };

    return {
        getFirstName: function () {
            return data.FirstName;
        },
        setFirstName: function (firstName) {
            data.FirstName = firstName;
        }
    };
});

Bu yaklaşım ile alıcı alanı için yeni değerleri ile fabrika güncellemek için, ve onları almak için değişiklikleri izlemek için:

myApp.controller('FirstCtrl', function ($scope, Data) {

    $scope.firstName = '';

    $scope.$watch('firstName', function (newValue, oldValue) {
        if (newValue !== oldValue) Data.setFirstName(newValue);
    });
});

myApp.controller('SecondCtrl', function ($scope, Data) {

    $scope.$watch(function () { return Data.getFirstName(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.firstName = newValue;
    });
});

Demo:http://jsfiddle.net/27mk1n1o/

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • CruzerLite

    CruzerLite

    1 EKİM 2011
  • Huot Media

    Huot Media

    7 Mayıs 2010
  • sknbp

    sknbp

    16 Kasım 2006