Question

我正试图围绕具有隔离范围的Angular指令并与控制器进行通信。

我想要创建的是一个简单的可重用搜索组件。此组件具有模型值（查询），并且应该有一些方法向控制器指示单击搜索按钮。

index.html看起来像这样：

<searchbox
    ng-model="query"
    on-search="search()"
></searchbox>

<p>Current search query: {{query}}</p>

<searchbox>指令如下所示：

app.directive('searchbox', function() {
    return {
        link : function(scope) {
            scope.submit = function() {
                console.log('Trying to return the query ' + scope.q);
                scope.onSearch(scope.q);
            }
        },
        replace : true,
        restrict : 'E',
        scope : {
            'ngModel' : '=q',
            'onSearch' : '&'
        },
        template : ''.concat(
            '<form><input ng-model="q" type="text" />',
            '<input type="submit" value="Search" ng-click="submit()" />',
            '</form>'
        )
    };
});

主控制器看起来像这样：

app.controller('AppCtrl', function($scope) {
    $scope.search = function(query) {
        alert('You searched for ' + query);
        alert('Search value: ' + $scope.query);
    }
});

不幸的是，由于search回调和$scope属性，查询不会出现在控制器中。

我有一点谷歌，但大多数答案似乎使用$scope.$eval的一些变体，或直接调用控制器，这似乎有点像kludge。

以上示例的Codepen可在此处找到：http://codepen.io/hay/pen/Avwjz

非常感谢任何帮助。

Answer 1

这里有两个问题：

范围定义必须是

'q' : '=ngModel',

左侧是您要在内部使用的名称（您的模板使用q），右侧是属性的名称。

HTML必须是

on-search="search(query)"

您的submit处理程序

...
scope.onSearch();

&表示表达式按原样评估。如果表达式只是search()，则search 始终在没有任何参数的情况下被调用，无论如何。

Angular指令：使用＆符号方法将值传递给控制器

1 个答案: