javascript - 使用 ng-click 更改出厂值

Question

我有一个工厂，我在其中将语言属性设置为字符串。现在我想在用户单击我网站上的图像时更改此属性(这里的想法是在单击标志时更改整个页面网站)。到目前为止，当我手动更改页面语言时，页面语言会发生变化(为此使用 ng-show )，但是在按下图像时我无法更改它。

我的工厂:

'use strict';

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

        myFactory.language = 'slo';

        return myFactory;
    });

我的 Controller :

'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>

需要更改的内容在 View 文件中，以及在模板中。如果您需要有关该项目的更多信息，请告诉我，我会尽量减少它。

Answer 1

你的工厂需要一个类似的方法

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

虽然您的 Controller 应该实现类似的方法

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

生成的 Controller :

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

并在 Controller 中将 $scope.language = Language.language; 更改为 $scope.language = Language.getLanguage();