Question

我有一个创建自动完成输入的指令

angular.module('autocomplete', [] )
    .directive('autocomplete', function (...) {
        return {
            restrict: 'E',
            scope: {
                "id": "@id",
                "selectedObject": "=selectedobject",
                "baseSearchUrl" : "@basesearchurl"
            },
            templateUrl: "..."
            link: function(...){...}
        }
    }

用法示例：

<autocomplete
    id="favoriteMovie"
    selectedobject='favMovie'
    searchUrl='/rest/movies?search=' />

效果很好。现在我想要的是创建一个新的，更具体的指令，为电影创建一个自动完成，所以我可以像这样使用它：

<autocompleteMovie
    id="favoriteMovie"
    selectedmovie='favMovie'/>

新指令如下所示：

angular.module('autocompletemovie', [])
.directive(
    'autocompletemovie',
    function() {
        return {
            restrict : 'E',
            scope : {
                "id" : "@",
                "selectedMovie" : "=selectedmovie"
            },
            templateUrl : '...'
        };
    });

我的新组件的Html模板：

<autocomplete
    id="{{id}}"
    selectedobject='{{selectedMovie}}'
    searchUrl='/rest/movies?search=' />

但这不起作用。 id属性正确传递给＆＃34;内部＆＃34; autocomplete，但selectedmovie属性设置的对象引用无效。

我做了第二次尝试，传递对象引用的名称而不是对象本身：

指令：

angular.module('autocompletemovie', [])
.directive(
    'autocompletemovie',
    function() {
        return {
            restrict : 'E',
            scope : {
                "id" : "@",
                "selectedMovie" : "@selectedmovie"
            },
            templateUrl : '...'
        };
    });

但这并没有奏效。

我希望你能理解我想要实现的目标。

[编辑] 我也尝试过：

<autocomplete
    id="{{id}}"
    selectedobject='selectedMovie'
    searchUrl='/rest/movies?search=' />

但它不起作用。即使我使用不同的selectedMovie属性调用该指令，也会在作用域上创建具有固定名称selectedmovie的对象：

<autocompleteMovie
    id="favoriteMovie"
    selectedmovie='favMovie'/>

在上面的例子中，我希望有一个名为favoriteMovie而不是selectedMovie的对象。

[/编辑]

Answer 1

尝试更改：

<autocomplete
    id="{{id}}"
    selectedobject='{{selectedMovie}}'
    searchUrl='/rest/movies?search=' />

到

<autocomplete
    id="{{id}}"
    selectedobject='selectedMovie'
    searchUrl='/rest/movies?search=' />

指令中的=语法绑定到对象，而{{}}语法将被解释为字符串。 id有效，因为@将解释的字符串值传递给指令。

如何在Angular JS中将对象引用传递给内部指令？

1 个答案: