如何在 Select2“更改”处理程序中访问 Angular 范围？

Question

我真的很想知道如何为正确的对象设置正确的属性。

目前在“更改”事件处理程序中，我不知道我所处的范围。实际上我不知道应该更新哪个位置。

Plunker：http://plnkr.co/edit/T4aBzND7VV2gCkui0I7P?p=preview

代码亮点

app.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.locations = ['Paris', 'London'];
}]);

app.directive('timezone', function(timezones) {
    var _updateSetting = function(e) {
        console.log(e.target.value);
        // How do I update objects in my scope?
        // (cannot access here)
    };
    return {
        restrict: 'E',

        link: function(scope, el, attrs) {
            el.select2( { data: timezones.get() } ).on("change", _updateSetting);
        },

        template : "<input type='hidden' class='timezoneSelector' style='width: 100%;'>"
    }
});

app.factory('timezones', function() {
    var timezones = ["Europe/London", "Europe/Paris"];
    var timezonesSelect = timezones.map(function(obj) { return {id: obj, text: obj }; } ); 
    // preparing data so it is ready to use for select2
    return {
        get : function() { return timezonesSelect; }
    }
});

注意：我不想使用https://github.com/angular-ui/ui-select2 我想更贴近我的代码，掌控一切:)

注意： Select2 构造了一些屏幕外 div，我可能会查找 $(e.target).parent().text() 但它对我来说看起来很丑

如果您对如何以“角度方式”正确执行此操作有任何建议 - 请在答案/cmets 中告诉我 :)

Answer 1

您可以通过在@urban_racoons 的回答中将其作为参数传递来访问范围。但是，当您在 Angular 之外使用事件时，您必须使用 $apply 让它知道您已更新范围。

app.directive('timezone', function(timezones) {
        var _updateSetting = function(scope, e) {
            console.log(e.target.value);
            // now you can update scope
        };

        return {
            restrict: 'E',

            link: function(scope, el, attrs) {
                el.select2( { data: timezones.get() } ).on("change", function(e) {
                  scope.$apply( function() {
                    _updateSetting(scope, e);
                  });
                });
            },

            template : "<input type='hidden' class='timezoneSelector' style='width: 100%;'>"
        }
    });

Answer 2

我不确定这是否是我最喜欢的方式，但它应该适用于您感兴趣的内容：

app.directive('timezone', function(timezones) {
    var _updateSetting = function(locations) {
        console.log(locations);

    };

    return {
        restrict: 'E',

        link: function(scope, el, attrs) {
            el.select2( { data: timezones.get() } ).on("change", function() {
              _updateSetting(scope.locations);
            });
        },

        template : "<input type='hidden' class='timezoneSelector' style='width: 100%;'>"
    }
});