26

我需要从指令内的回调中修改根范围属性。但是该指令位于由 switch 指令创建的内部范围内。

HTML

<div ng-app="app" ng-controller='AppController'>
    <p>Selected: {{ selected }}</p>
    <div ng-switch on="selected">
        <div ng-switch-default>
            <p>Item: {{ selected }}</p>
            <custom-tag selected-item="selected" />
        </div>
        <div ng-switch-when="New value">
            <p>Worked</p>
        </div>
    </div>
</div>

JavaScript

angular.module('app', [])    
    .directive("customTag", [function () {
    return {
        restrict: "E",
        replace: true,
        template: "<input type='button' value='Click me' />",

        link: function (scope, element, attrs) {
            element.bind('click', function () {
                scope[attrs.selectedItem] = "New value";
                scope.$apply();
            });
        }
    };
}]);

function AppController($scope) {
    $scope.selected = 'Old value';
}

小提琴：http: //jsfiddle.net/nJ7FQ/

我的目标是能够在选定区域中显示“新值”。我怎样才能完成我想做的事情？我究竟做错了什么？

此外，因为我正在尝试制作一个组件。有没有办法做同样的事情但有一个孤立的范围？

4

2 回答 2

20

我更新了小提琴，基本上必须去父级获取正确的“选定”变量，还使用了隔离范围 = 来获取传入的值和内部模型之间的两种方式绑定。

http://jsfiddle.net/nJ7FQ/2/

angular.module('app', [])

    .directive("customTag", [function () {
    return {
        restrict: "E",
        replace: true,
        template: "<input type='button' value='Click me' />",
        scope: {model:'='},

        link: function (scope, element, attrs) {
            element.bind('click', function () {
                scope.model[attrs.selectedItem] = "New value";
                scope.$apply();
            });
        }
    };
}]);

function AppController($scope) {
    $scope.selected = 'Old value';
}

和 HTML

<div ng-app="app" ng-controller='AppController'>
    <p>Selected: {{ selected }}</p>
    <div ng-switch on="selected">
        <div ng-switch-default>
            <p>Item: {{ selected }}</p>
            <custom-tag selected-item="selected" model="$parent" />
        </div>
        <div ng-switch-when="New value">
            <p>Worked</p>
        </div>
    </div>
</div>

更新了小提琴以使用您对属性的原始阅读：http: //jsfiddle.net/nJ7FQ/4/

于 2013-07-10T02:54:23.567 回答
15

我稍微改进了jsfiddle：

angular.module('app', [])

    .directive("customTag", ['$parse', function ($parse) {
    return {
        restrict: "E",
        replace: true,
        template: "<input type='button' value='Click me' />",

        link: function (scope, element, attrs) {
            element.bind('click', function () {
                scope.$apply(function () {
                    $parse(attrs.selectedItem).assign(scope.$parent, "New value");
                });
            });
        }
    };
}]);

function AppController($scope) {
    $scope.selected = { 'foo': 'Old value' };
}

http://jsfiddle.net/nJ7FQ/15/

这样，您要更改的范围值也可以是selected.foo示例中的对象属性。此外，我删除了范围参数并告诉指令始终使用父范围。最后，我将点击处理程序包装到$apply回调中（例如，请参见此处）。当然，最好是使用ngClick而不是element.bind().

于 2014-01-12T09:31:05.087 回答