使用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。