在angular中调用关于ng-change选项标签的指令

时间:2016-08-11 06:41:27

标签: javascript html angularjs angularjs-directive html-select

我有任何多语言记录我们定义的id,然后创建一个自定义指令,根据所选语言进行更改。它在页面加载时工作正常,但是当我在ng-change事件中更改select标记中的值时,则它仅转换子选择标记的第一个元素,而不是完整。 这是我的HTML代码:

<div class="row">
            <div class="col-md-2">
                <label>Views:</label>
            </div>
            <div class="col-md-6">
                <select ng-model="vm.selectView" class="form-control" ng-change="vm.fillSubViews(vm.selectView)">
                    <option ng-repeat="view in viewList" value="{{view.viewId}}">
                        <div cc-text-in-lang view="view">{{view.textInCurrentSelectedLang}}</div>
                    </option>
                </select>
            </div>
        </div>

        <div class="row" ng-if="vm.subViews.length>0">
            <div class="col-md-2">
                <label>Profile Views:</label>
            </div>
            <div class="col-md-6">
                <select ng-model="vm.selectedSubView"
                        class="form-control">
                    <option ng-repeat="view in vm.subViews" value="{{view.viewId}}">
                        <div cc-text-in-lang view="view">{{view.textInCurrentSelectedLang}}</div>
                    </option>
                </select>
            </div>
        </div>

这是我用指定语言显示文字的指令:

<div cc-text-in-lang view="view">{{view.textInCurrentSelectedLang}}</div>

当我的页面第一次加载时,它会将文本转换为正常,但是当我更改上面选择标记中的值时,它只转换下面选择标记的第一个元素,而不是所有标记。

这是我的TextinLang指令 - 转换文本

指令:

(function() {
    "use strict";

    function ccTextInLang() {
        return {
            scope: {
                view: "=",
            },
            transclude: false,
            templateUrl: "/App/Directives/TextInLang/TextInLang.html",
            controller: "textInLangCtrl as vm",
            replace: true
        };
    }

    angular.module("app")
        .directive("ccTextInLang", ccTextInLang);
})();

这是控制器:

(function () {
    "use strict";

    function textInLangCtrl($scope,$rootScope) {

        activate();

        function activate() {
            debugger;
            var validCaption = false;
            if ($scope.view) {
                var viewName = isJsonValid($scope.view.viewName);
                if (viewName) {
                    angular.forEach(viewName, function (item) {
                        if (item.languageCodeId === $rootScope.selectedLanguage) {
                            validCaption = true;
                            $scope.view.textInCurrentSelectedLang = item.caption;
                        }
                    });
                }
            }

        };

        function isJsonValid(str) {
            var validJson;
            try {
                validJson = JSON.parse(str);
            } catch (e) {
                return false;
            }
            return validJson;
        }


    }

    textInLangCtrl.$inject = ["$scope","$rootScope"];

    angular
        .module("app")
        .controller("textInLangCtrl", textInLangCtrl);
})();

此链接属于我的指示。请看一下 MyWindow

有人可以帮我吗?

0 个答案:

没有答案