2013-07-06 34 views
44

Tôi muốn sử dụng vài hằng số trực tiếp trong html và vài lần trong bộ điều khiển.Tôi có thể trực tiếp truy cập vào mô-đun không đổi từ HTML theo AngularJS

Ví dụ, đây là chính mô-đun ứng dụng:

angular.module('website', []) 
.constant('ROUTES', (function() { 
    return { 
     SIGN_IN: '/sign/in' 
    } 
})()) 
.config([..., 'ROUTES', function(..., ROUTES { 
    $routeProvider.when(ROUTES.SIGN_IN, {templateUrl: 'pages/sign_in.html', controller:  'SignInController'}); 
}]); 

Vì vậy, đây là rõ ràng, làm thế nào để sử dụng hằng từ bộ điều khiển.

Nhưng làm thế nào tôi có thể làm một cái gì đó như thế này:

<html ng-app="website"> 
<body> 
<a href="{{ROUTES.SIGN_IN}}">Sign in</a> 
</body> 
</html> 

Vấn đề là để giữ tất cả các tuyến đường ở một nơi. Vì vậy, tôi có thể làm điều này, hoặc có thể được tôi chọn sai cách?

+5

chỉ cần thêm ĐƯỜNG đến $ phạm vi trong SignInController –

+0

Cảm ơn rất nhiều, đó là những gì tôi cần. –

Trả lời

76

IMHO cách tốt hơn để thực hiện việc này là sử dụng $rootScope Trong html mọi phạm vi được kế thừa từ $ rootScope, vì vậy nếu biến không có trong góc phạm vi hiện tại, hãy sử dụng biến được khai báo trong $ rootScope.

A (IMHO) cách tốt nhất là khởi tạo này trong chạy "giai đoạn"

angular.module('myApp') 
    .run(function ($rootScope) { 
     $rootScope.ROUTES = ROUTES 
    }); 

 

+1

Vâng, điều này có vẻ tốt hơn, nhờ –

+0

Tôi nghĩ rằng đây nên là một khái niệm mà mọi người cố gắng hiểu trước khi họ viết bất kỳ bộ điều khiển nào. Tôi không biết bao nhiêu lần tôi đã làm việc trên một bộ điều khiển với phạm vi và rootscope nạp vào nó. – CarComp

+7

Hãy nhớ rằng giá trị được xác định trong '$ rootScope' sẽ không thể truy cập trực tiếp trong các chỉ thị với phạm vi phân lập. Trong trường hợp này, bạn có thể nhận giá trị này bằng '$ root.ROUTES' trong khung nhìn. – fracz

16

Tôi cũng như cách tiếp cận $ rootScope, nhưng tôi có, trong một số trường hợp sử dụng một bộ lọc.

Ví dụ đơn giản, giả sử có một CONFIG không đổi được định nghĩa ở đâu đó như một đối tượng có thuộc tính được gọi là BuildVersion. Bạn có thể tạo ra một cái gì đó lọc như thế này:

angular.module('myApp') 
    .filter('interpolate', ['CONFIG', function (CONFIG) { 
     return function (text) { 
      return String(text).replace(/\%VERSION\%/mg, CONFIG.BuildVersion); 
     }; 
    }]); 

Và trong HTML:

<html ng-app="website"> 
    <body> 
     <div>{{'%VERSION%' | interpolate}}</div> 
    </body> 
</html> 

hoặc

<html ng-app="website"> 
    <body> 
     <div>{{'bla bla bla %VERSION%.' | interpolate}}</div> 
    </body> 
</html> 
+0

Tôi gần như sử dụng điều này bởi vì nó đã quen thuộc, và đó là một câu trả lời tốt, nhưng tôi nghĩ rằng câu trả lời được chấp nhận là tốt hơn tổng thể. Upvoted cả hai. – VSO

17

Hơi giống với câu trả lời khác nhưng IMO sạch:

angular.module('website') 
    .constant("ROUTES", { 
     SIGN_IN: "/sign/in" 
    }) 
    .run(function ($rootScope, ROUTES) { 
     $rootScope.ROUTES = ROUTES; 
    }); 

Và:

<a href="{{ROUTES.SIGN_IN}}">Sign in</a> 

HTH

+0

Đây là một cách tiếp cận tốt. Giữ cho mã chạy trong khi vẫn duy trì sự tách biệt với dữ liệu. –

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