如何使用指令中的屬性來選擇數據

我試圖做一個指令元素，它使用屬性的值來創建一個http請求並打印響應。在與指令相關聯的控制器中使用$ attrs來覆蓋使用該屬性值創建http請求的部分。但是，如果我試圖在同一文檔中輸出具有3個不同屬性值的數據，則所有指令都會輸出相同的數據。如何使用指令中的屬性來選擇數據

我已經做了我的代碼Plunker來證明我的問題

基本上就是我想要做的是這樣的：

<person personNumber='person1'></person> 
<person personNumber='person2'></person> 
<person personNumber='person3'></person>

我從example.com/{person-number數據} ：

人1：

{ 
    name: "John", 
    city: "New York" 
}

人2：

{ 
     name: "Bob", 
     city: "Los Angeles" 
}

人3：

{ 
     name: "Jay", 
     city: "San Diego" 
}

通緝輸出：

John: New York 

Bob: Los Angeles 

Jay: San Diego

我得到什麼：

Jay: San Diego 

Jay: San Diego 

Jay: San Diego

你看到的是所有的值都改變爲最後的http請求。我不知道如何解決這個問題。

這裏是我的角碼（也可見Plunker）：

var app = angular.module('app', []); 

app.controller('personController', ['$scope', '$attrs', function($scope, $attrs) { 
    //mock json response 
    var people = { 
     person1: { 
     name: "John", 
     city: "New York" 
     }, 
     person2: { 
     name: "Bob", 
     city: "Los Angeles" 
     }, 
     person3: { 
     name: "Jay", 
     city: "San Diego" 
     } 
    }; 

    //mock $http.get to an api with url (www.example.com/{person}) 
    var self = this; 
    function mockHttpGetService() { 
     self.info = people[$attrs.personNumber]; 
    } 
    mockHttpGetService(); 
    } 
]); 

app.directive('person', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'template.html', 
     controller: 'personController', 
     controllerAs: 'person' 
    }; 
    } 
);

和我的模板：

<p>{{person.info.name}}: {{person.info.city}} </p>

問題

我認爲它可能有一些做該指令的「範圍」屬性，但是我嘗試了所有不同的版本（'='，'@'，'< '，'&'），但我無法讓它工作。

你能幫我嗎？

來源

2016-07-25 FeatherNL

你的假設是正確的，它與指令中的範圍屬性有關。你需要這個，使其工作：

{ 
    restrict: 'E', 
    templateUrl: 'template.html', 
    controller: 'personController', 
    controllerAs: 'person', 
    scope: { 
    personNumber:'=' 
    } 
};

更新plunker - https://plnkr.co/edit/i4anaSJsSq8iKGgHo7eK?p=preview

這是失敗的原因是將您的作用域屬性的指令描述之前，它的範圍是周圍的模板的指令，其中被宣佈。因此，由於它在指令的所有實例之間共享範圍，因此分配的最後一個指派給它們全部。在這種情況下，person3最後被分配到person-number，因此所有3個實例都在查看原始範圍的person-number值。

隔離範圍是將對象分配給範圍時發生的情況。在這種情況下，我已經爲personNumber分配了一個新的範圍。這是每個指令實例的唯一範圍。

來源

2016-07-25 18:43:31 jusopi

謝謝你的解決方案！ – FeatherNL

如何使用指令中的屬性來選擇數據

回答

相關問題