2013-07-03 33 views
69

Tôi cần truyền một biến cho bộ điều khiển khác. Tôi có mã sau có liên quan đến ListCtrl:Góc ng-click với cuộc gọi đến một chức năng điều khiển không hoạt động

<a href="#items" data-router="article" ng-click="changeListName('metro')"> 

Liên kết sẽ đến một bộ điều khiển khác, ItemCtrl.

Tôi muốn chuyển một biến cho ItemCtrl. Tôi nghĩ đến việc sử dụng một dịch vụ gọi SharedProperties:

service('sharedProperties', function() { 
    var list_name = ''; 

    return { 
     getListName: function() { 
      return list_name; 
     }, 
     setListName: function(name) { 
      list_name = name; 
     } 
    }; 
}); 

Khi liên kết được nhấp, tôi gọi một sự kiện nhấp chuột góc để kích hoạt các chức năng sau:

$scope.changeListName = function(name) { 
    sharedProperties.setListName(name); 
}; 

Tuy nhiên, ng nhấp chuột dường như không thay đổi giá trị tài sản chia sẻ của tôi ...

CẬP NHẬT

tôi đặt một cảnh báo bên trong f unction kích hoạt bởi ng-click và cảnh báo được kích hoạt, như nó phải được.

Tuy nhiên, khi tôi viết chức năng của tôi như thế này:

$scope.changeListName = function(name) { 
    sharedProperties.setListName(name); 
}; 

Nó không làm việc ... có vẻ như 'sharedProperties.setListName (tên);' không được thực hiện ...

Nếu tôi đặt nó ngoài chức năng với một tên giả (ví dụ. metro), nó hoạt động ..

CẬP NHẬT 3

tôi đã cố gắng nhiều điều và tôi khá tự tin rằng vấn đề là với chức năng này:

$scope.changeListName = function(list_name) { 
    sharedProperties.setListName(list_name); 
}; 

Bạn có biết tại sao điều này xảy ra không?

Trả lời

96

Bạn có lẽ nên sử dụng các chỉ thị ngHref cùng với ngClick:

<a ng-href='#here' ng-click='go()' >click me</a> 

Dưới đây là một ví dụ: http://plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview

<body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
    {{msg}} 
    <a ng-href='#here' ng-click='go()' >click me</a> 
    <div style='height:1000px'> 

     <a id='here'></a> 

    </div> 
    <h1>here</h1> 
    </body> 

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

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 

    $scope.go = function() { 

    $scope.msg = 'clicked'; 
    } 
}); 

Tôi không biết nếu điều này sẽ làm việc với các thư viện bạn sử dụng nhưng ít nhất nó cũng sẽ cho phép bạn liên kết và sử dụng chức năng ngClick.

** Cập nhật **

Đây là bản trình diễn của bộ này và hoạt động tốt với dịch vụ.

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

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

app.controller('MainCtrl', function($scope, sharedProperties) { 
    $scope.name = 'World'; 

    $scope.go = function(item) { 
    sharedProperties.setListName(item); 


    } 

    $scope.getItem = function() { 

    $scope.msg = sharedProperties.getListName(); 
    } 
}); 

app.service('sharedProperties', function() { 
    var list_name = ''; 

    return { 

     getListName: function() { 
      return list_name; 
     }, 
     setListName: function(name) { 
      list_name = name; 
     } 
    }; 


}); 

* Chỉnh sửa *

Vui lòng xem lại https://github.com/centralway/lungo-angular-bridge mà nói về cách sử dụng Lungo và góc. Cũng lưu ý rằng nếu trang của bạn hoàn toàn tải lại khi duyệt đến một liên kết khác, bạn sẽ cần phải lưu giữ các thuộc tính được chia sẻ của mình vào localstorage và/hoặc cookie.

+0

Dường như với cả 'ng-ref' và' href', 'ng-click' được kích hoạt và kích hoạt chức năng của tôi. Tôi đã cập nhật câu trả lời của mình để phản ánh tốt hơn vấn đề của mình. –

+0

Bây giờ bạn có hỏi một câu hỏi riêng không? – lucuma

+0

Không, sự cố của tôi chưa được giải quyết. –

3

Tôi sẽ đoán bạn không gặp lỗi hoặc bạn đã đề cập đến chúng. Nếu đúng như vậy, hãy thử xóa giá trị thuộc tính href để trang không điều hướng trước khi mã của bạn được thực thi. Trong Angular nó hoàn toàn chấp nhận được để trống các thuộc tính href.

<a href="" data-router="article" ng-click="changeListName('metro')"> 

Ngoài ra tôi không biết data-router đang làm gì nhưng nếu bạn vẫn chưa nhận được kết quả phù hợp, đó có thể là lý do.

+0

dữ liệu router là cho Lungo js. Nó có hệ thống định tuyến riêng. Tôi không thể xóa href vì sau đó lungo sẽ không biết nơi để định tuyến ... –

4

Sử dụng bí danh khi xác định Bộ điều khiển trong cấu hình góc của bạn. Ví dụ: LƯU Ý: Tôi đang sử dụng TypeScript tại đây

Chỉ cần lưu ý Bộ điều khiển, nó có bí danh của homeCtrl.

module MongoAngular { 
    var app = angular.module('mongoAngular', ['ngResource', 'ngRoute','restangular']); 

    app.config([ 
     '$routeProvider', ($routeProvider: ng.route.IRouteProvider) => { 
      $routeProvider 
       .when('/Home', { 
        templateUrl: '/PartialViews/Home/home.html', 
        controller: 'HomeController as homeCtrl' 
       }) 
       .otherwise({ redirectTo: '/Home' }); 
     }]) 
     .config(['RestangularProvider', (restangularProvider: restangular.IProvider) => { 
     restangularProvider.setBaseUrl('/api'); 
    }]); 
} 

Và đây là cách để sử dụng nó ...

ng-click="homeCtrl.addCustomer(customer)" 

Hãy thử nó .. Nó có thể làm việc cho bạn vì nó làm việc cho tôi ...;)

Các vấn đề liên quan