使用ng-click更改出廠值

Question

我有一個工廠，我將一個語言屬性設置為字符串。 現在我想在用戶點擊我網站上的圖像時更改此屬性（這里的想法是在單擊標記時更改整個頁面網站）。 到目前為止，當我手動更改頁面時，頁面語言會發生變化（使用ng-show ），但是在按下圖像時我無法更改它。

我的工廠：

'use strict';

angular.module('langService', [])
    .factory('Language', function() {
        var myFactory = {};

        myFactory.language = 'slo';

        return myFactory;
    });

我的控制器：

'use strict';

angular.module('ZICApp')
    .controller('navbarController', function ($scope, Language) {
        $scope.language = Language.language;
    });

我的HTML：

  <div id="navbar" ng-controller="navbarController">
    <ul>
      <li><a ng-click="language = 'eng'"><img src="images/EN.gif"></a></li>
    </ul>
  </div>

需要更改的內容位於視圖文件內以及模板中。 如果您需要有關該項目的其他信息，請告訴我，盡量減少它。

Answer 1

你的工廠需要像這樣的方法

        myFactory.setLanguage = function(lang) {
            myFactory.language = lang;
        };

你的控制器應該實現像這樣的方法

        $scope.changeLanguage = function(lang) {
            Language.setLanguage(lang);
        }

你的ng-click調用changeLanguage('eng')

---

結果工廠：

'use strict';

angular.module('langService', [])
    .factory('Language', function() {
        var myFactory = {};

        myFactory.language = 'slo';
        myFactory.setLanguage = function(lang) {
            myFactory.language = lang;
        };

        return myFactory;
});

結果控制器：

'use strict';

angular.module('ZICApp')
    .controller('navbarController', function ($scope, Language) {
        $scope.language = Language.language;
        $scope.changeLanguage = function(lang) {
            Language.setLanguage(lang);
        }
    });

產生的HTML：

<div id="navbar" ng-controller="navbarController">
    <ul>
        <li><a ng-click="changeLanguage('eng')"><img src="images/EN.gif"></a></li>
    </ul>
</div>

---

編輯 skubski是絕對正確的，變量應該私有。 為此，您可以像這樣更改工廠：

angular.module('langService', [])
    .factory('Language', function() {
        var language = 'slo';

        function setLanguage(lang) {
            //...optional logic
            language = lang;
        }

        function getLanguage() {
            return language;
        }

        return {
            setLanguage: setLanguage,
            getLanguage: getLanguage
        };
});

並在控制器中更改$scope.language = Language.language; to $scope.language = Language.getLanguage();

Answer 2

你應該使用“。” 點表示法 ，以便在您想直接訪問它們時使用對象及其屬性的引用而不是基本類型。

您應該嘗試更改您的工廠：

var myFactory = {};
var myFactory.settings = {
    currentLanguage : 'slo'
};
return myFactory;

在控制器中：

$scope.languageProvider = Language;

在標記中通過引用訪問對象的屬性：

<li><a ng-click="languageProvider.settings.currentLanguage = 'eng'"><img src="images/EN.gif"></a></li>

如果需要直接訪問服務對象，請使用此方法，但建議使用getter / setter方法訪問服務數據。

編輯我會選擇像iWork建議的setter / getter aproach。