Question

我使用service和$ resource制作了一个指令来搜索REST API并将结果传递给控制器。代码如下所示：

app.controller('productsCtrl', ['$scope', function ($scope) {
    var self = this;
    self.selection;

    self.searched = function (selected) {
        self.selection = selected;
    };
}]);

app.service('productsService', ['productsResource', function (productsResource) {
    var self = this;

    self.findProducts = function (search) {
        return productsResource.query({
            sku: search
        });
    };
}]);

app.factory('productsResource', ['$resource', function ($resource) {
    return $resource('products/:sku', {
        id: '@sku'
    });
}]);

app.directive('productSearch', ['productsService', function (productsService) {
    return {
        restrict: 'E',
        scope: {
            productSelected: '&'
        },
        templateUrl: '/products/product_search.html',
        link: function (scope) {
            scope.findProducts = function (search) {
                scope.searchResults = productsService.findProducts(search);
            };
            scope.selectResult = function (selected) {
                scope.selection = selected;
                scope.showResults = false;
            };
        }
    };
}]);

相关的HTML行是：

<div ng-show='products.selection'>
    {{products.selection.name}}  //does not update
</div>

并从指令模板：

<div ng-click="productSelected({selected: selection})"></div>

问题是我的模型在指令调用控制器方法时不会更新（它将显示上次搜索的结果）。这对我来说很有意义，因为没有＆＃34;有角度的＆＃34;在那里调用函数。但我怎么能让这个工作。我已尝试使用$scope.$apply()，但会引发错误。

作为一个附带问题。我这样做的方式是对的吗？这是有角度的方式吗？特别是在指令中使用服务并将指令传递给控制器？

编辑：这是整个HTML文件（使用controllerAs）：

<div>
    <product-search product-selected='products.searched(selected)'></product-search>
    <div ng-show='products.selection'>
        {{products.selection.name}}
    </div>
</div>

Answer 1

我认为你错过了来自指令的回调。您可能需要添加

//Sidebar
var sidebar = require("sdk/ui/sidebar").Sidebar({
    id: 'sidebar',
    title: 'Sidebar',
    url: require("sdk/self").data.url("sidebar.html"),
    onAttach: function(worker) {
    //
    },
        onShow: function() {
            console.log("showing");
        },
        onHide: function() {
        console.log("hiding");
    },
    onDetach: function() {
        console.log("detaching");
    }
});

在指令中的scope.selectResult函数内。完整代码将如下所示

scope.productSelected({selected: selection})

从指令调用控制器函数不会更新范围

1 个答案: