Angular - 两个相同的指令，具有不同的数据 - 隔离范围

After my research I found out that I need to use isolated scopes in order to achive my goal. Let me give you a little scheme how my application works now.

在我的研究之后,我发现我需要使用孤立的范围来实现我的目标。让我给你一个小方案,我的应用程序现在如何工作。

I have a webservice written in ASP.NET. I receive data in JSON using jQuery.ajax wrapped in a function:

我有一个用ASP.NET编写的web服务。我使用包装在函数中的jQuery.ajax在JSON中接收数据:

function getData(id) {
    var params = { "PlannerId": id };
        jQuery.ajax({
            type: "POST",
            url: "Default.aspx/getData",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(params),
            dataType: "json",
            traditional: true,
            async: false,
            success: function (msg) {
                $scope.allSeminars = allSeminars.concat(msg.d.SeminarDays);
            }
        }); 
    return $scope.allSeminars;
}

The function is placed in the controller let's say "dataController".

该函数放在控制器中,我们说“dataController”。

Normally to display my directive once. I call my function (also in my controller) with some "id" i get from dynamic input.

通常一次显示我的指令。我用动态输入中的一些“id”来调用我的函数(也在我的控制器中)。

getData(jQuery('div[display-data]').parent().find('input').val()); and then call directive:

的getData(jQuery的( 'DIV [显示数据]')的父()发现( '输入')VAL()。);然后调用指令:

<div display-data></div> and it works for one data and one directive.

,它适用于一个数据和一个指令。

Now I want to display my directive twice on my webpage with different data in each.

现在我想在我的网页上显示我的指令两次,每次都有不同的数据。

I added isolated scope to my directive:

我在我的指令中添加了隔离范围:

rfg.directive("displayData", ['someService', function (someService) {
    return {
        restrict: "A",
        scope: {
            seminar: '=sem'
        },
        templateUrl: '../../template.tpl.html',
        controller: 'dataController',

Now I display my directive like this:

现在我像这样显示我的指令:

<div display-data sem="sem0"></div><br>
<div display-data sem="sem1"></div>

And my controller looks like this:

我的控制器看起来像这样:

var semId = jQuery('div[display-data]');
$scope.sem0 = getData(jQuery(semId[0]).parent().find('input').val());
$scope.sem1 = getData(jQuery(semId[1]).parent().find('input').val());

I've also tried to add "seminar"(the one specified in directive scope) in the ng-repeat in my template but w/o success.

我还尝试在我的模板中的ng-repeat中添加“研讨会”(在指令范围中指定的那个),但没有成功。

Does any1 has some clue what I'm doing wrong and also how can I replace get data from .ajax in different way than calling function responsible for that directly from controller.

any1是否有一些线索我做错了什么以及如何以不同的方式替换来自.ajax的get数据,而不是直接从控制器调用负责该函数的函数。

Thank You!

1 个解决方案

#1

I think your all logic is wrong, you should not use jQuery with AngularJS.

我认为你的所有逻辑都是错的,你不应该在AngularJS中使用jQuery。

You can replace your jQuery.ajax() with $http or ngRessource

您可以使用$ http或ngRessource替换jQuery.ajax()

-> https://docs.angularjs.org/api/ng/service/$http

-> https://docs.angularjs.org/api/ngResource

Instead of doing this jQuery(semId[0]).parent().find('input').val() use ng-model

而不是做这个jQuery(semId [0])。parent()。find('input')。val()使用ng-model

-> https://docs.angularjs.org/api/ng/directive/ngModel

With that, you can start on good basis.

有了它,你可以从良好的基础开始。

#1