AngularJS：NG-重複了自定義指令與分離範圍

不過，我覺得這可能只是我不會在我的代碼使用原語是this question重複。我有一個指令，用於將內聯svgs動態地放入我的視圖中。它的工作原理就像這樣：AngularJS：NG-重複了自定義指令與分離範圍

app.directive('icon', ['$timeout', function($timeout) { 
    return { 
    restrict: "E", 
    scope: { 
     href:"@", 
     title: "@" 
    }, 
    replace: true, 
    templateUrl: $timeout(function(elm,attrs) { 
     var definition = { 
     add: "add133.svg", 
     alert: "warning30.svg", 
     attachment: "attachment13.svg", 
     call: "auricular6.svg", 
     calendar: "calendar5.svg", 
     notify: "church2.svg", 
     compass: "circular14.svg", 
     cloud: "cloud127.svg", 
     addUser: "create1.svg", 
     delete: "delete30.svg", 
     trash: "delete48.svg", 
     servicedesk: "edit26.svg", 
     email: "email20.svg", 
     star: "favourites7.svg", 
     key: "key162.svg", 
     lock: "lock27.svg", 
     search: "magnifier12.svg", 
     menu: "menu48.svg", 
     print: "printer70.svg", 
     settings: "settings21.svg", 
     share: "share12.svg", 
     customer: "user91.svg" 
     }; 
     return 'svg/' + definition[attrs.name]; 
    },30000) 
    } 
}]);

最後我讓我用一個服務來獲取從JSON文件定義列表更新代碼，但我只是想試探這個現在。這按預期工作。但是當我重複它時，值突然變得不明確。見下面筆者認爲：

<div ng-repeat="link in config.mainlinks" ng-class="{true: 'active', false: 'dormant'}[config.urlCheck('{{link.name}}')]" sys-stack="2"> 
    <a href="{{link.href}}" title="{{link.title}}"> 
     <icon name="{{link.icon}}"></icon> 
    </a> 
</div>

正如你可能從我的代碼推斷，我在我的控制器名爲config定義的模型和模型的屬性稱爲mainlinks。 Mainlinks是爲了提供工作所需的代碼塊的屬性的對象，它看起來像這樣

mainlinks: { 
     dash: { 
      name: "dashbaord", 
      href: "#dashboard", 
      title: "Dashboard", 
      icon: "compass" 
     }

當它呈現的DOM看起來是這樣的：

<div ng-repeat="link in config.mainlinks" ng-class="{true: 'active', false: 'dormant'}[config.urlCheck('calendar')]" sys-stack="2" class="ng-scope ng-isolate-scope z2 dormant"> 
    <a href="#calendar" title="Calendar"> 
     <icon name="{{link.icon}}"></icon> 
    </a> 
</div>

但是像這樣的作品細

<span ng-repeat="link in config.mainlinks"> 
    {{link.icon}} 
</span>

我的猜測是因爲我的測試跨度和我的div塊的其他工作部分都在同一範圍內，即控制器外殼他們。但圖標有其自己的隔離範圍，在該範圍內，link.icon沒有任何意義。我怎樣才能解決這個限制？還是我完全脫離基地？

來源

2014-08-29 richbai90

那是因爲你attibute值的名字不會被時間templateURL功能勢必被調用。您只需按照原樣獲取文本「{{link.icon}}」即可。SO模板網址返回無效的網址，它無法加載該指令 – PSL 2014-08-29 20:24:23

你可以提供任何建議如何解決它，我更新了我的代碼，添加$超時服務希望延遲執行，但它似乎沒有任何影響。 – richbai90 2014-08-29 20:39:12

問題是，如果你在可以訪問的屬性中加載了靜態文本，那麼你在templateURl中無法真正做到這一點，但在這種情況下，你可能不得不做一些棘手的事情。或者在鏈接函數中進行替換svg並編譯它。 – PSL 2014-08-29 20:41:39

的問題是，你只能做這麼多的templateUrl功能，你ATLEAST必須屬性靜態文本，你可以在模板URL中讀取。如果在屬性中使用內插值或範圍綁定，那麼在編譯延遲後對templateurl進行評估時，它將不可用。既然你有ng-repeat內的所有東西，你的整個ng-repeat和裏面的指令只有在你的指令的templateurl被渲染後纔會被編譯。因此，一些選項可以替代模板url，只需放置一些模板，並在讀取屬性值的指令的鏈接階段（或後鏈接階段）中替換它（因爲它當時可用）。或者只是將功能包裝到單個指令中，並將mainlinks綁定到它。

事情是這樣的： -

標記： -

<icons mainlinks="config.mainlinks"></icons>

指令： -

.directive('icons', [function() { 
    return { 
    restrict: "E", 
    scope: { 
     mainlinks: "=" 
    }, 
    templateUrl:'links.html', 
    replace: true, 
    link:function(scope, elm, attrs){ 
    ..... 

    } 
    } 
});

移動config.urlCheck和definition可移至服務（比如SVG服務），可以被共享（如果這是你經常在你的應用中使用的東西）並將其注入到你的指令中。還要注意的是mainlinks似乎是字典，以便您ng-repeat應該ng-repeat="(k,link) in mainlinks"

Plnkr

來源

2014-08-29 21:24:55 PSL

更新的重擊 – PSL 2014-08-29 21:28:42

AngularJS：NG-重複了自定義指令與分離範圍

回答

相關問題