Question

我需要创建一个指令或一组指令，允许我的用户在我的网站上设置IME（输入法编辑器）的选项。 IME是虚拟键盘，音译API，基本上是帮助您输入与操作系统设置不同的字母表的工具。用户需要在站点上使用两种语言，并且必须在输入和文本区域之间切换它们。用户在InputController中为每种语言（全局＆＃39;）设置他的IME选择，然后在每种元素的语言之间切换，即“本地”，状态应为每个输入/ textarea元素都不同。

app.directive('dynamicInput', function(){
    return {
        restrict: "A",
        scope: {
            inputlang: "=inputlang"
        },
        controller: 'InputController',
        link: function(scope, element){
            element[0].onfocus = function(){
                scope.attachToField(element[0].id, scope.inputlang);
            };
            element[0].onclick = function(){
                scope.attachToField(element[0].id, scope.inputlang);
            };
        }
    };
});

这是输入和textarea元素的属性指令，它指示InputController启用元素上的IME。正如您所看到的，输入lang由父级确定，父级是一种“假”＆＃34;指令我曾经把输入语言从一个孩子弹回到另一个孩子。 inputlang使用此指令设置，＆＃34; lang-selector＆＃34;

app.directive('langSelector', function(){
    return {
        restrict: "E",
        templateUrl: "/angular/templates/lang-selector.html",
        scope: {
            inputlang: "="
        },
    };
});

及其模板：

<div>
    <div id="kb_opt_wrapper" class="flexrow spread">
        <div class="tc pointer" ng-click="inputlang = 'en'" ng-class="inputlang == 'en' ? 'red' : 'black'">
            <div class="true-center">
            </div>
            <div class="testbk ">
                English
            </div>
        </div>
        <div class="tc pointer" ng-click="inputlang = 'ar'">
            <div class="testbk" ng-class="inputlang == 'ar' ? 'red' : 'black'">
                Arabic
            </div>
        </div>
    </div>
</div>

最后，有一个带有子范围的虚拟父指令dynamic-field。

app.directive('dynamicField', function(){
    return {
        restrict: "E",
        scope: true,
    };
});

所以最终的实现看起来像这样：

<dynamic-field>
    <textarea inputlang="inputlang" dynamic-input id="commentfield" ></textarea>
    <lang-selector inputlang="inputlang"></lang-selector>
</dynamic-field>

所以这基本上可以正常工作，直到它在另一个指令中嵌套两次。 inputlang冒泡到父控制器，然后绑定到其他兄弟。然后，每个元素的状态不再明显。点击＆＃34; ar＆＃34;在一个lang-selector上将其更改为同一父级中的其他指令。此外，我需要能够从动态字段外部（使用ng-model等）访问动态输入元素的值，从而使动态输入/动态字段范围完全无法从父母访问只是创造另一个问题。我该如何挑选？

angular：从父控制器中隔离指令实例变量

0 个答案: