AngularJS: Denetleyiciler arasında değişkenleri nasıl iletebilirim?

İki Açısal denetleyicim var:

function Ctrl1($scope) {
    $scope.prop1 = "First";
}

function Ctrl2($scope) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

Ctrl1İçinde kullanamıyorum Ctrl2çünkü tanımsız. Ancak bu şekilde aktarmaya çalışırsam…

function Ctrl2($scope, Ctrl1) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

Bir hata alıyorum. Bunu nasıl yapacağını bilen var mı?

iş

Ctrl2.prototype = new Ctrl1();

Ayrıca başarısız.

NOT: Bu denetleyiciler iç içe yerleştirilmez.

Değişkenleri birden çok denetleyicide paylaşmanın bir yolu, bir hizmet oluşturmak ve onu kullanmak istediğiniz herhangi bir denetleyiciye enjekte etmektir.

Basit servis örneği:

angular.module('myApp', [])
    .service('sharedProperties', function () {
        var property = 'First';

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

Hizmeti bir denetleyicide kullanma:

function Ctrl2($scope, sharedProperties) {
    $scope.prop2 = "Second";
    $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

Bu, bu blogda çok güzel açıklanmıştır (Ders 2 ve özellikle).

Birden çok denetleyicileri arasında bu özelliklere bağlamak istiyorsanız, bağlı başvuruyu korumak için bir ilkel tür (boolean, dize, sayı) yerine bir nesnenin özelliğine bağlarsanız daha iyi çalıştığını gördüm.

Örnek: var property = { Property1: 'First' };yerine var property = 'First';.

GÜNCELLEME: (Umarım) işleri daha açık hale getirmek için aşağıdakilere bir örnek gösteren bir keman budur:

• Paylaşılan değerin statik kopyalarına bağlanma (myController1 içinde)
  • Bir ilkel (dize) bağlanması
  • Bir nesnenin özelliğine bağlama (kapsam değişkenine kaydedilir)
• Değerler güncellendiğinde kullanıcı arayüzünü güncelleyen paylaşılan değerlere bağlanma (myController2'de)
  • Bir ilkel (dize) döndüren bir işleve bağlanma
  • Nesnenin özelliğine bağlanma
  • Bir nesnenin özelliğine iki yönlü bağlanma

Basit şeyleri basit örneklerle göstermeyi seviyorum :)

İşte çok basit bir Serviceörnek:

angular.module('toDo',[])

.service('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  this.dataObj = _dataObj;
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

Ve burada jsbin

Ve işte çok basit bir Factoryörnek:

angular.module('toDo',[])

.factory('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  return {
    dataObj: _dataObj
  };
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

Ve burada jsbin

Bu çok basitse, burada daha sofistike bir örnek var

Ayrıca ilgili en iyi uygulamalar yorumları için buradaki cevaba bakın

--- Bu cevabın bu soru için olmadığını biliyorum, ama bu soruyu okuyan ve Fabrikalar gibi Hizmetleri ele almak isteyen insanların bunu yapmaktan kaçınmasını istiyorum ----

Bunun için bir Servis veya Fabrika kullanmanız gerekecektir.

Hizmetler, iç içe olmayan denetleyiciler arasında veri paylaşmak için EN İYİ UYGULAMADIR .

Bu konuda veri paylaşımı ile ilgili çok iyi bir açıklama nesnelerin nasıl bildirileceği. Şanssızdım çünkü okumadan önce bir AngularJS tuzağına düştüm ve çok sinirliydim. Bu sorunu önlemenize yardımcı olalım.

"Ng-book: AngularJS ile ilgili eksiksiz kitap" ı kontrolörlerde çıplak veri olarak oluşturulan AngularJS ng modellerinin YANLIŞ olduğunu okudum!

Bir $ scope öğesi şu şekilde oluşturulmalıdır:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // best practice, always use a model
  $scope.someModel = {
    someValue: 'hello computer'
  });

Ve böyle değil:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // anti-pattern, bare value
  $scope.someBareValue = 'hello computer';
  };
});

Bunun nedeni, DOM (html belgesi) için çağrıları şu şekilde içermesi önerilir (EN İYİ UYGULAMA)

<div ng-model="someModel.someValue"></div>  //NOTICE THE DOT.

Alt denetleyicinizin bir nesneyi üst denetleyiciden değiştirebilmesini istiyorsanız, iç içe denetleyiciler için çok yararlıdır ....

Ancak sizin durumunuzda iç içe kapsamlar istemezsiniz, ancak nesneleri hizmetlerden denetleyicilere almak için benzer bir yön vardır.

Diyelim ki hizmetiniz 'Fabrika' ve dönüş alanında objectC içeren objectB içeren bir objectA var.

Denetleyicinizden objectC'yi kapsamınıza almak istiyorsanız, aşağıdakileri söylemek yanlıştır:

$scope.neededObjectInController = Factory.objectA.objectB.objectC;

Bu işe yaramaz ... Bunun yerine sadece bir nokta kullanın.

$scope.neededObjectInController = Factory.ObjectA;

Daha sonra DOM'da objectC'den objectC'yi çağırabilirsiniz. Bu, fabrikalarla ilgili en iyi uygulamadır ve en önemlisi, beklenmedik ve yakalanamayan hatalardan kaçınmaya yardımcı olacaktır.

$ RootScope kullanarak Servis oluşturmadan çözüm:

Özellikleri Uygulama Denetleyicileri arasında paylaşmak için Angular $ rootScope'u kullanabilirsiniz. Bu, verileri paylaşmak için başka bir seçenektir ve insanların bunu bilmesini sağlar.

Bazı işlevleri Kontrolörler arasında paylaşmanın tercih edilen yolu Hizmetler'dir, global bir özelliği okumak veya değiştirmek için $ rootscope kullanabilirsiniz.

var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = true;
}]);

app.controller('Ctrl2', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = false;
}]);

Şablonda $ rootScope kullanma ($ root ile Access özellikleri):

<div ng-controller="Ctrl1">
    <div class="banner" ng-show="$root.showBanner"> </div>
</div>

Yukarıdaki örnek bir cazibe gibi çalıştı. Birden fazla değeri yönetmem gerektiğinde bir değişiklik yaptım. Umarım bu yardımcı olur!

app.service('sharedProperties', function () {

    var hashtable = {};

    return {
        setValue: function (key, value) {
            hashtable[key] = value;
        },
        getValue: function (key) {
            return hashtable[key];
        }
    }
});

Değerleri kullanma eğilimindeyim, bunun neden kötü bir fikir olduğunu tartışması herkes için mutlu ..

var myApp = angular.module('myApp', []);

myApp.value('sharedProperties', {}); //set to empty object - 

Sonra değeri bir hizmete göre enjekte edin.

Ctrl1'de ayarla:

myApp.controller('ctrl1', function DemoController(sharedProperties) {
  sharedProperties.carModel = "Galaxy";
  sharedProperties.carMake = "Ford";
});

ve ctrl2'den erişim:

myApp.controller('ctrl2', function DemoController(sharedProperties) {
  this.car = sharedProperties.carModel + sharedProperties.carMake; 

});

Aşağıdaki örnekte, kardeş denetleyicileri ve değeri değiştirdiğinde bir işlem.

Örnek olayı kullanın: kenar çubuğunda başka bir görünümün içeriğini değiştiren bir filtreniz var.

angular.module('myApp', [])

  .factory('MyService', function() {

    // private
    var value = 0;

    // public
    return {
      
      getValue: function() {
        return value;
      },
      
      setValue: function(val) {
        value = val;
      }
      
    };
  })
  
  .controller('Ctrl1', function($scope, $rootScope, MyService) {

    $scope.update = function() {
      MyService.setValue($scope.value);
      $rootScope.$broadcast('increment-value-event');
    };
  })
  
  .controller('Ctrl2', function($scope, MyService) {

    $scope.value = MyService.getValue();

    $scope.$on('increment-value-event', function() {    
      $scope.value = MyService.getValue();
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  
  <h3>Controller 1 Scope</h3>
  <div ng-controller="Ctrl1">
    <input type="text" ng-model="value"/>
    <button ng-click="update()">Update</button>
  </div>
  
  <hr>
  
  <h3>Controller 2 Scope</h3>
  <div ng-controller="Ctrl2">
    Value: {{ value }}
  </div>  

</div>

Denetleyiciler ve hatta direktifler arasında veri paylaşmanın önerilen yolunun, daha önce belirtildiği gibi hizmetleri (fabrikalar) kullanmak olduğunu belirterek bu soruya katkıda bulunmak istiyorum, ancak aynı zamanda bir bunun nasıl yapılacağına dair pratik bir örnek çalışma.

İşte çalışan dalgıç: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

Öncelikle oluşturmak için hizmet senin olacak paylaşılan verileri :

app.factory('SharedService', function() {
  return {
    sharedObject: {
      value: '',
      value2: ''
    }
  };
});

Ardından, kontrol cihazlarınıza enjekte edin ve paylaşılan verileri kapsamınıza alın:

app.controller('FirstCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('SecondCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('MainCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

Bunu direktifleriniz için de yapabilirsiniz , aynı şekilde çalışır:

app.directive('myDirective',['SharedService', function(SharedService){
  return{
    restrict: 'E',
    link: function(scope){
      scope.model = SharedService.sharedObject;
    },
    template: '<div><input type="text" ng-model="model.value"/></div>'
  }
}]);

Umarım bu pratik ve temiz cevap birisine yardımcı olabilir.

Bunu servisler veya fabrikalarla yapabilirsiniz. Bazı temel farklılıklar için esasen aynıdırlar. Bu açıklamayı thinkster.io'da takip etmenin en kolay yolu olarak buldum . Basit, noktaya ve etkili.

Mülkü, kapsamların üst öğesinin bir parçası da yapamaz mısınız?

$scope.$parent.property = somevalue;

Doğru demiyorum ama işe yarıyor.

Ah, başka bir alternatif olarak bu yeni şeylerden biraz var. Bu yerel depolama ve açısal çalışır. Rica ederim. (Ama gerçekten, adama teşekkürler)

https://github.com/gsklee/ngStorage

Varsayılanlarınızı tanımlayın:

$scope.$storage = $localStorage.$default({
    prop1: 'First',
    prop2: 'Second'
});

Değerlere erişin:

$scope.prop1 = $localStorage.prop1;
$scope.prop2 = $localStorage.prop2;

Değerleri saklayın

$localStorage.prop1 = $scope.prop1;
$localStorage.prop2 = $scope.prop2;

Uygulamanıza ngStorage ve kumandanıza $ localStorage enjekte etmeyi unutmayın.

Bunu yapmanın iki yolu var

1) get / set servisini kullanın

2) $scope.$emit('key', {data: value}); //to set the value

 $rootScope.$on('key', function (event, data) {}); // to get the value

İkinci Yaklaşım:

angular.module('myApp', [])
  .controller('Ctrl1', ['$scope',
    function($scope) {

    $scope.prop1 = "First";

    $scope.clickFunction = function() {
      $scope.$broadcast('update_Ctrl2_controller', $scope.prop1);
    };
   }
])
.controller('Ctrl2', ['$scope',
    function($scope) {
      $scope.prop2 = "Second";

        $scope.$on("update_Ctrl2_controller", function(event, prop) {
        $scope.prop = prop;

        $scope.both = prop + $scope.prop2; 
    });
  }
])

Html:

<div ng-controller="Ctrl2">
  <p>{{both}}</p>
</div>

<button ng-click="clickFunction()">Click</button>

Daha fazla ayrıntı için dalma pistonuna bakınız:

http://plnkr.co/edit/cKVsPcfs1A1Wwlud2jtO?p=preview

Servis yapmak istemiyorsanız, bunu yapabilirsiniz.

var scope = angular.element("#another ctrl scope element id.").scope();
scope.plean_assign = some_value;

$ RootScope ve hizmetlerinin yanı sıra, paylaşılan verileri eklemek için açısalı genişletmek için temiz ve kolay bir alternatif çözüm vardır:

kontrolörlerde:

angular.sharedProperties = angular.sharedProperties 
    || angular.extend(the-properties-objects);

Bu özellikler, kapsamlardan ayrılan 'açısal' nesneye aittir ve kapsamlarda ve hizmetlerde paylaşılabilir.

Nesneyi enjekte etmek zorunda olmamanızın 1 faydası: tanımlamanızdan hemen sonra her yerden erişilebilir!