Question

我正在创建一个应用程序，其中Ajax请求从服务器获取包列表并显示它们。之后我创建了一个名为＆＃34; packageDetails＆＃34;的指令。适用于单个包装。

该指令必须做两件事：

1-单击元素时通过AJAX请求从服务器获取详细信息

2-从页面中的其他位置挑选一些HTML，然后将其插入到单击的包旁边。

我的问题：在点击包时，AJAX请求正在从服务器获取详细信息并且正在操纵DOM。我还可以看到范围变量$scope.packageDetails在控制器中得到更新。但这些变化并未反映在视野中。 但是，如果我再次点击某个软件包，则此次视图会更新。

到目前为止我尝试过：

使用范围。$ apply指令和控制器。这似乎是其他开发人员最常见的问题，但没有解决我的问题。

尝试使用ng-click in element但没有运气。

Plunker

以下是代码：

控制器

/*
an array that creates the rows and columns
$scope.packageList = [];
*/
$scope.getPackageDetails = function (packageId) {
    console.log('get details for ' + packageId);
    ajaxService.getPackageDetails(packageId).then(function (data) {
        if (parseInt(data.ResponseStatus, 10) === 0) {
            $scope.packageDetails = data.Packages;
            // i have tried $scope.$apply() here; doesn't work
        }
    });

查看

<div class="row" ng-repeat="columnPackages in packageList">
    <div class="col-md-3 onePackage" ng-repeat="package in columnPackages" package-details package-id="{{package.Id}}" click="getPackageDetails"  has-response="response" >
        <figure>
            <a class="package_view">
                <strong>{{package.Name}}</strong>
            </a>
        </figure>
    </div>
</div>

指令

epApp.directive('packageDetails', function () {
    return {
        scope:
        {
            hasResponse: '=hasResponse',
            click: '=click'
        },
        link: function (scope, elem, attrs) {            
            if (scope.$parent.$last) {
                $(elem).parent('div.row').find('div.onePackage').on('click', function () {
                    /* some dom manipulation */
                    var packages_content = jQuery('.packages_widget_append').html();
                    jQuery(this).closest(".row").after(packages_content);

                    /* called parent controller function to get the details*/
                    console.log('clicked ' + parseFloat(attrs.packageId));
                    scope.click(parseFloat(attrs.packageId));
                    // i have tried $scope.$apply() here as well; doesn't work

                });
            }
        }
    }

});

请帮忙。

谢谢。

Answer 1

1：你有没有忘记为你的功能设置参数？： - ）

click="getPackageDetails(package.Id)"

而不是

click="getPackageDetails"

Answer 2

我认为你想要的东西，但你不知道如何使用Angular。你使用jQuery，但没有它你可以做到：）

通过您的示例，我看到了两种可能的解决方案：

1）您在控制器中完成所有操作

你声明一个试图做一些DOM操作的指令，如果你决定不这样做，你可以用ng-show / ng-hide的组合显示/隐藏包细节等等...... 点击可以通过ng-click处理。

像这样，不再需要DOM操作，不需要手动执行范围。$ apply。

2）你想用指令

来做

您的package-details指令应该是Element指令。在其中，您也可以定义模板并正确使用绑定。您将传递包数组并循环遍历它。

对于click控件，有两个选择，将控制器函数传递给指令或在指令中使用Ajaxservice。我认为第二个比第一个更容易，如果你的指令不是通用的，你应该考虑采用这个解决方案。

1：http://goo.gl/rUzKWn

的Plunker

Plunker for 2（服务）：http://goo.gl/yixa7U

我不确定是否正确回答了您的问题，但也许这可以为您提供一些想法来做您想做的事情！

从指令调用控制器函数不会更新视图

2 个答案: