angular 指令生成的复选框不响应 ng-change

Question

我的指令：

            (function () {
                var directive = function ($compile, $http, $rootScope, $translate) {
                    return {
                        restrict: 'E',
                        scope: {
                            baseUrl: '@rmsUrl',
                        },
                        link: function (scope, element, attrs) {
                            $rootScope.languageSwitcher = {
                                toggle: true,
                                changeLanguage: function () {
                                    if ($rootScope.languageSwitcher.toggle) {
                                        $translate.use('ENG');

                                    } else {
                                        $translate.use('FRE');
                                    }
                                }
                            }

                            $rootScope.$on('oauth2:authSuccess', function (data) {
                                var html2 = 'French <label class="switch">'
                                html2 += '<input type="checkbox" ng-model="languageSwitcher.toggle" ng-change="languageSwitcher.changeLanguage()" /><div></div>'
                                html2 += '</label>English'
                                element.html(html2);
                                $compile(element.contents())(scope);
                            });

                        }
                    };
                };

                angular.module('testingApp')
                    .directive('rmsLanguageToggler', directive);

            }());

我的索引文件包含指令：

<rms-language-toggler  rms-url='blah blah blah'></rms-language-toggler>

我的问题：

html 正确呈现，但是 changing/clicking 复选框不会触发函数：$rootScope.languageSwitcher.changeLanguage()

Answer 1

我现在知道原因了。原来指令中的 ng-change 和 ng-model 仍然引用内部隔离范围。我必须使用 $parent。访问外部模型，即 $parent.languageSwitcher.toggle

angular 指令生成的复选框不响应 ng-change

The checkbox generated by angular directive not responding to ng-change

angularjs

angularjs-directive