Angular指令匹配多個屬性

Question

我可以定義一個角度指令，以便它匹配多個相似的術語，即

angular.module('search').directive('platformPreload', function() {
  return {
    link: function(scope, element, attrs) {
    }
  }
}

將匹配以下兩者：

<div platform-preload-terms="[]"></div>
<div platform-preload-suggestions="[]"></div>

Answer 1

沒有通配符指令聲明。

但是你可以隔離函數並重復定義：

angular.module('search')
    .directive('platformPreload', PlatFunction)
    .directive('platformPreloadSuggestions', PlatFunction)


PlatFunction() {
    return {
        link: function(scope, element, attrs) { }
    }
}

Answer 2

您可以為指令創建隔離范圍，以允許您在指令的隔離范圍中使用這些屬性。 像這樣：

 angular.module('myApp', []) .controller('appController', function($scope) { }) .directive('platformPreload', function() { return { restrict: 'A', scope: { platformTerms: '@', platformSuggestions: '@' }, link: function($scope, element, attrs) { console.log('DIRECTIVE'); if ($scope.platformTerms) { console.log($scope.platformTerms); } if ($scope.platformSuggestions) { console.log($scope.platformSuggestions); } } }; });

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="appController"> <div platform-preload platform-terms="These are the terms"></div> <div platform-preload platform-suggestions="These are the suggestions"></div> </body> </html>

Angular指令匹配多個屬性

問題描述

2 個解決方案

解決方案1
2 已采納 2016-09-27 11:36:37

解決方案2
1 2016-09-27 11:41:41

Angular指令匹配多個屬性

問題描述

2 個解決方案

解決方案1 2 已采納 2016-09-27 11:36:37

解決方案2 1 2016-09-27 11:41:41

解決方案1
2 已采納 2016-09-27 11:36:37

解決方案2
1 2016-09-27 11:41:41