为什么指令之间的范围不连接？

Question

我有下拉指令： dropdown.html：

<div class='dropdown-container' ng-class='{ show: listVisible }'>
    <div class='dropdown-display insetShadow' ng-click='show();' ng-class='{ clicked: listVisible }'>
        <span ng-if='!isPlaceholder'>{{ display }}</span>
        <span class='placeholder' ng-if='isPlaceholder'>{{ placeholder }}</span>
        <i class='fa fa-angle-down'></i>
    </div>
    <div class='dropdown-list'>
        <div>
            <div ng-repeat='item in list' ng-click='select(item)' ng-class='{ selected: isSelected(item) }'>
                <div>
                    <span>{{property !== undefined ? item[property] : item}}</span>
                    <i class='fa fa-check'></i>
                </div>
            </div>
        </div>
    </div>
</div>

JS：

.directive('dropdown', ['$rootScope', function($rootScope) {
    return {
        restrict: "E",
        templateUrl: "templates/dropdown.html",
        scope: {
            placeholder: "@",
            list: "=",
            selected: "=",
            property: "@",
            value: "@"
        },
        link: function(scope, elem, attr) {
            scope.listVisible = false;
            scope.isPlaceholder = true;

            scope.select = function(item) {
                scope.isPlaceholder = false;
                scope.selected = item[scope.value];
                scope.listVisible = false;

            };

            scope.isSelected = function(item) {                                                                                      
                return item[scope.value] === scope.selected;
            };

            scope.show = function() {
                scope.listVisible = true;
            };

            $rootScope.$on("documentClicked", function(inner, target) {
                if(!$(target[0]).is(".dropdown-display.clicked") && !$(target[0]).parents(".dropdown-display.clicked").length > 0) {
                    scope.$apply(function() {
                        scope.listVisible = false;
                    });
                }
            });                     

            scope.$watch('selected', function(value) {
                if(scope.list != undefined) {
                    angular.forEach(scope.list, function(objItem) {
                        if(objItem[scope.value] == scope.selected) {
                            scope.isPlaceholder = objItem[scope.property] === undefined;
                            scope.display = (objItem[scope.property].toLowerCase().indexOf('пусто') == -1) ? objItem[scope.property] : '';
                        }
                    });
                }
            });

            scope.$watch('list', function(value) {
                angular.forEach(scope.list, function(objItem) {
                    if(objItem[scope.value] == scope.selected) {
                        scope.isPlaceholder = objItem[scope.property] === undefined;
                        scope.display = objItem[scope.property];
                    }
                });
            });

        }
    }
}])

用法：

<dropdown placeholder='' list='actions' selected='' property='title' value='id' style='width:150px;'></dropdown>

属性： list => 要在下拉列表中显示的对象数组，基本数据。 selected => 范围内的变量以保存在下拉值中选择的值（来自选定对象的字段的值）。 属性 => 数组中对象的字段，以在下拉列表中显示类似标签，供用户选择值。 value => 对象的字段就像一个选定的值。

例子：

$scope.savedValue;
$scope.dataList= [{
    'title' :'text text text 111',
    'id':'1'
}, {
    'title' :'text text text 222',
    'id':'2'
}, {
    'title' :'text text text 333',
    'id':'3'
}, {
    'title' :'text text text 444',
    'id':'4'
}, {
    'title' :'text text text 555',
    'id':'5'
}]; 

不工作（不知道为什么）：

<dropdown placeholder='' list='dataList' selected='savedValue' property='title' value='id'></dropdown>

工作：

$scope.obj = {};
$scope.obj.savedValue;
<dropdown placeholder='' list='dataList' selected='obj.savedValue' property='title' value='id'></dropdown>

Answer 1

常见的点问题。您不能修改，即来自嵌套范围的简单字符串。 在您的 plunk 中，让我们进行一些修改，添加第二个下拉列表：

<dropdown  ng-repeat="i in [1, 2]" style='width:150px;' placeholder='' list='dataList' selected='savedValue' property='title' value='id'></dropdown>
selected: {{ savedValue }}

预计也会看到两个连接的下拉菜单 - 但这不会发生。 ng-repeat 为每个元素创建嵌套作用域，saveValue 成功传递给子作用域，但子作用域不能修改它。 http://plnkr.co/edit/Nd0wDm6chq6CKDlucRfZ?p=preview

所以你需要使用一些包装器：

<dropdown  ng-repeat="i in [1, 2]" style='width:150px;' placeholder='' list='dataList' selected='o.savedValue' property='title' value='id'></dropdown>
selected: {{ o.savedValue }}

然后它就起作用了： http://plnkr.co/edit/HMWBTrW9egFc663uniiO?p=preview