Question

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

enter image description here

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

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()，但它看起来很难看我

如果你有任何建议如何以“角度方式”正确地做到这一点 - 请在答案/评论中告诉我:)）

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%;'>"
    }
});

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

2 个答案: