使用ng-click更改出厂值

时间:2015-11-19 12:32:57

标签: javascript angularjs

我有一个工厂,我在其中将一个语言属性设置为字符串。现在我想在用户点击我网站上的图像时更改此属性(这里的想法是在单击标记时更改整个页面网站)。到目前为止,当我手动更改页面时,页面语言会发生变化(使用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>

需要更改的内容位于视图文件内以及模板中。如果您需要有关该项目的其他信息,请告诉我,尽量减少它。

2 个答案:

答案 0 :(得分:5)

您的工厂需要像

这样的方法
        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;更改为$scope.language = Language.getLanguage();

答案 1 :(得分:1)

你应该使用“。” 点符号,以便在您想直接访问它们时使用对象及其属性的引用而不是基本类型。

您应该尝试更改工厂:

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。