AngularJS: Làm thế nào tôi có thể chuyển các biến giữa các bộ điều khiển?

Tôi có hai bộ điều khiển góc:

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
}

Tôi không thể sử dụng Ctrl1bên trong Ctrl2vì nó không được xác định. Tuy nhiên nếu tôi cố gắng vượt qua nó như vậy thì nên

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

Tôi nhận được một lỗi. Có ai biết cách để làm điều này không?

Đang làm

Ctrl2.prototype = new Ctrl1();

Cũng thất bại.

LƯU Ý: Các bộ điều khiển này không được lồng vào nhau.

Một cách để chia sẻ các biến trên nhiều bộ điều khiển là tạo một dịch vụ và đưa nó vào bất kỳ bộ điều khiển nào mà bạn muốn sử dụng nó.

Ví dụ dịch vụ đơn giản:

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

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

Sử dụng dịch vụ trong bộ điều khiển:

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

Điều này được mô tả rất độc đáo trong blog này (Bài 2 và đặc biệt).

Tôi đã thấy rằng nếu bạn muốn liên kết với các thuộc tính này trên nhiều bộ điều khiển thì nó hoạt động tốt hơn nếu bạn liên kết với thuộc tính của đối tượng thay vì kiểu nguyên thủy (boolean, chuỗi, số) để giữ tham chiếu ràng buộc.

Ví dụ: var property = { Property1: 'First' };thay vì var property = 'First';.

CẬP NHẬT: Để (hy vọng) làm cho mọi thứ rõ ràng hơn ở đây là một câu đố cho thấy một ví dụ về:

• Liên kết với các bản sao tĩnh của giá trị được chia sẻ (trong myControll1)
  • Liên kết với một nguyên thủy (chuỗi)
  • Liên kết với thuộc tính của đối tượng (được lưu vào biến phạm vi)
• Liên kết với các giá trị được chia sẻ cập nhật giao diện người dùng khi các giá trị được cập nhật (trong myControll2)
  • Liên kết với một hàm trả về một nguyên hàm (chuỗi)
  • Liên kết với tài sản của đối tượng
  • Hai cách ràng buộc với tài sản của một đối tượng

Tôi thích minh họa những điều đơn giản bằng những ví dụ đơn giản :)

Đây là một Serviceví dụ rất đơn giản :

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;
});

Và đây là jsbin

Và đây là một Factoryví dụ rất đơn giản :

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;
});

Và đây là jsbin

Nếu điều đó quá đơn giản, đây là một ví dụ phức tạp hơn

Cũng xem câu trả lời ở đây để nhận xét thực tiễn tốt nhất có liên quan

--- Tôi biết câu trả lời này không dành cho câu hỏi này, nhưng tôi muốn những người đọc câu hỏi này và muốn xử lý các Dịch vụ như Factories để tránh rắc rối khi làm điều này ----

Đối với điều này, bạn sẽ cần phải sử dụng một Dịch vụ hoặc Nhà máy.

Các dịch vụ là THỰC HÀNH TỐT NHẤT để chia sẻ dữ liệu giữa các bộ điều khiển không lồng nhau.

Một chú thích rất tốt về chủ đề này về chia sẻ dữ liệu là cách khai báo các đối tượng. Tôi đã không may mắn vì tôi đã rơi vào một cái bẫy AngularJS trước khi tôi đọc về nó, và tôi đã rất thất vọng. Vì vậy, hãy để tôi giúp bạn tránh rắc rối này.

Tôi đọc từ "ng-book: Cuốn sách hoàn chỉnh về AngularJS" rằng các mô hình ng AngularJS được tạo ra trong các bộ điều khiển dưới dạng dữ liệu trần là SAU!

Một phần tử $ scope nên được tạo như thế này:

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

Và không như thế này:

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

Điều này là do nó được đề xuất (THỰC HÀNH TỐT NHẤT) cho DOM (tài liệu html) để chứa các cuộc gọi dưới dạng

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

Điều này rất hữu ích cho các bộ điều khiển lồng nhau nếu bạn muốn bộ điều khiển con của bạn có thể thay đổi một đối tượng từ bộ điều khiển chính ....

Nhưng trong trường hợp của bạn, bạn không muốn phạm vi lồng nhau, nhưng có một khía cạnh tương tự để đưa các đối tượng từ các dịch vụ đến bộ điều khiển.

Hãy nói rằng bạn có dịch vụ 'Factory' và trong không gian trả về có một objectA chứa objectB chứa objectC.

Nếu từ bộ điều khiển của bạn, bạn muốn NHẬN objectC vào phạm vi của mình, thì đó là một sai lầm khi nói:

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

Điều đó sẽ không hoạt động ... Thay vào đó chỉ sử dụng một dấu chấm.

$scope.neededObjectInController = Factory.ObjectA;

Sau đó, trong DOM bạn có thể gọi objectC từ objectA. Đây là một thực tiễn tốt nhất liên quan đến các nhà máy, và quan trọng nhất, nó sẽ giúp tránh các lỗi không mong muốn và không thể bắt được.

Giải pháp mà không cần tạo Dịch vụ, sử dụng $ rootScope:

Để chia sẻ các thuộc tính trên các bộ điều khiển ứng dụng, bạn có thể sử dụng Angular $ rootScope. Đây là một tùy chọn khác để chia sẻ dữ liệu, đưa nó để mọi người biết về nó.

Cách ưa thích để chia sẻ một số chức năng trên Bộ điều khiển là Dịch vụ, để đọc hoặc thay đổi thuộc tính toàn cầu mà bạn có thể sử dụng $ rootscope.

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;
}]);

Sử dụng $ rootScope trong một mẫu (Thuộc tính truy cập với $ root):

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

Các mẫu ở trên làm việc như một nét duyên dáng. Tôi vừa thực hiện một sửa đổi trong trường hợp tôi cần quản lý nhiều giá trị. Tôi hi vọng cái này giúp được!

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

    var hashtable = {};

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

Tôi có xu hướng sử dụng các giá trị, vui cho mọi người thảo luận tại sao đây là một ý tưởng tồi ..

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

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

Sau đó tiêm giá trị theo một dịch vụ.

Đặt trong ctrl1:

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

và truy cập từ ctrl2:

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

});

Ví dụ sau đây cho thấy cách chuyển các biến giữa các bộ điều khiển anh chị em và thực hiện một hành động khi giá trị thay đổi.

Ví dụ sử dụng: bạn có một bộ lọc trong thanh bên thay đổi nội dung của chế độ xem khác.

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>

Tôi muốn đóng góp cho câu hỏi này bằng cách chỉ ra rằng cách được đề xuất để chia sẻ dữ liệu giữa các bộ điều khiển và thậm chí các chỉ thị là sử dụng các dịch vụ (nhà máy) như đã được chỉ ra, nhưng tôi cũng muốn cung cấp một ví dụ thực tế làm việc về cách đó nên được thực hiện.

Dưới đây là chương trình làm việc: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

Đầu tiên, tạo dịch vụ của bạn , sẽ có dữ liệu được chia sẻ của bạn :

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

Sau đó, chỉ cần đưa nó vào bộ điều khiển của bạn và lấy dữ liệu được chia sẻ trên phạm vi của bạ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;
});

Bạn cũng có thể làm điều đó cho các chỉ thị của bạn , nó hoạt động theo cùng một cách:

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>'
  }
}]);

Hy vọng câu trả lời thiết thực và sạch sẽ này có thể hữu ích cho ai đó.

Bạn có thể làm điều đó với các dịch vụ hoặc nhà máy. Chúng cơ bản giống nhau cho một số khác biệt cốt lõi. Tôi thấy lời giải thích này trên thinkster.io là dễ theo dõi nhất. Đơn giản, đến mức và hiệu quả.

Bạn cũng không thể biến tài sản thành một phần của phạm vi cha mẹ sao?

$scope.$parent.property = somevalue;

Tôi không nói nó đúng nhưng nó hoạt động.

Ah, có một chút của công cụ mới này như là một thay thế khác. Đó là lưu trữ cục bộ, và hoạt động nơi các công trình góc. Không có gì. (Nhưng thực sự, cảm ơn anh chàng)

https://github.com/gsklee/ngStorage

Xác định mặc định của bạn:

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

Truy cập các giá trị:

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

Lưu trữ các giá trị

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

Hãy nhớ tiêm ngStorage trong ứng dụng của bạn và $ localStorage trong bộ điều khiển của bạn.

Có hai cách để làm điều này

1) Sử dụng dịch vụ get / set

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

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

Cách tiếp cận thứ hai:

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>

Để biết thêm chi tiết, xem plunker:

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

Nếu bạn không muốn làm dịch vụ thì bạn có thể làm như thế này.

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

Bên cạnh $ rootScope và các dịch vụ, có một giải pháp thay thế sạch và dễ dàng để mở rộng góc cạnh để thêm dữ liệu được chia sẻ:

trong bộ điều khiển:

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

Thuộc tính này thuộc về đối tượng 'góc', tách biệt với phạm vi và có thể được chia sẻ trong phạm vi và dịch vụ.

1 lợi ích của nó là bạn không phải tiêm đối tượng: chúng có thể truy cập được ở bất cứ đâu ngay sau khi bạn đào tẩu!