Question

由于某种原因，我无法在链接功能中访问我的隔离范围变量“index”。我已经尝试了@和=，看看它是否有任何影响，这没有效果，我也尝试使用索引以外的单词（如果它已经被角度或其他东西使用）结果相同。错误消息：ReferenceError: index is not defined。

指令：

var jobernizeDirectives = angular.module('jobernizeDirectives', []);

jobernizeDirectives.directive('viewLargeContent', function() {
    return {
        scope: {
            index: '=index' 
        },
        require: 'ngModel',
        link: function (scope, el, attrs, ngModel) {

            console.log(index);

            function openEditor() {
                console.log(index);

                var main_container = angular.element('.main_container');
                var view_frame = angular.element('.view-frame');

                console.log(ngModel);

                main_container.append('<div class="dimmer"></div>');
                main_container.append(

                        '<div class="large-content' + index + '">'
                    +   '<textarea>' + ngModel.$viewValue + '</textarea>' 
                    +   '<button>Submit Changes</button>'
                    +   '</div>'

                );  

                var dimmer = angular.element('.dimmer');
                var content_container = angular.element('.large-content' + index);      

                // content_container.css({ marginTop: (content_container.height()/-2), width: view_frame.width(), marginLeft: (view_frame.width()/-2) })
                content_container.css({ height: (0.8*main_container.height()), width: view_frame.width(), marginLeft: (view_frame.width()/-2)  })

                content_container.find('button').on('click', function() {
                    var new_content = content_container.find('textarea').get(0).value;

                    ngModel.$setViewValue(new_content);

                    content_container.hide();
                    dimmer.hide();
                });
            }

            // el.on('click', openEditor);
            el.on('click', openEditor);

        }
    }
});

HTML：

<div data-ng-controller="resumesController">

    <div class="row">
        <div class="small-12 columns">
            <h2>Your Resumes</h2>
        </div>
    </div>

    <div class="row">
        <div class="small-12 columns">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Date Added</th>
                        <th>View/Edit Resume</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="resume in resumes">
                        <td>{{ resume.name }}</td>
                        <td>{{ resume.category }}</td>
                        <td>{{ resume.date_added }}</td>
                        <td><button index="le" view-large-content data-ng-model="resume.content">View Resume</button></td>
                    </tr>
                </tbody>
            <table>
        </div>
    </div>

</div>

Answer 1

索引是范围对象的属性，因此您可以像这样访问它：

scope.index

'@'或'='都可以工作，不同之处在于'@'将插值并在更改时更新隔离范围，'='表示Angular应保持属性和隔离范围同步。如果变量具有相同的名称，则可以使用语法糖

scope: {
  index: '@' 
},

以下是您的代码JSBin。

隔离范围变量未定义

1 个答案: