Mẫu chỉ thị góc khác nhau

Question

Tôi có chỉ thị myDirective có loại biến. Nếu tôi chạy <my-directive type="X"> Tôi muốn chỉ thị sử dụng templateUrl: x-template.html. Nếu tôi làm <my-directive type="Y"> Tôi muốn chỉ thị sử dụng templateUrl: y-template.html.

Đây là chỉ thị hiện tại của tôi.

app.directive('myDirective', function() { 
    var myDirective = { 
     templateUrl: 'X-template.html', 
     restrict: 'E', 
     scope: { 
      type: '=' 
     }, 
    }; 
    return myDirective; 
}); 

Tôi đọc thông qua lưu lượng truy cập và tài liệu góc nhưng không tìm thấy bất kỳ thứ gì tôi cần.

bây giờ tôi đang cố gắng để làm một cái gì đó dọc theo dòng:

if ($scope.type === 'X') { 
    templateUrl: 'X-template.html', 
} 
else if ($scope.type === 'Y') { 
    templateUrl: 'Y-template.html', 
} 

Nhưng không biết nơi để làm điều đó.

Các bạn có biết điều này có thể thực hiện được không?

Answer 1

Bạn có thể làm việc xung quanh this issue sử dụng ng-include bên compile:

app.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     compile: function(element, attrs) { 
      element.append('<div ng-include="\'' + attrs.type + '-template.html\'"></div>'); 
     } 
    } 
}); 

fiddle

Answer 2

Nếu bạn sẵn sàng sống trên bờ chảy máu với một xây dựng trên con đường mã 1.1.x (chú ý cảnh báo kèm theo mọi mục ghi chú xây dựng 1.1.x nên tôi không pha loãng câu trả lời này bằng cách lặp lại câu trả lời ở đây), bạn đã may mắn - tính năng này chỉ được thêm vào bản phát hành 1.1.4 vào ngày 3 tháng 4. Bạn có thể tìm thấy ghi chú phát hành cho 1.1.4 here và tính năng của task log bao gồm một bài kiểm tra Jasmine để minh họa cách sử dụng chức năng mới.

Nếu bạn bảo thủ hơn và đang sử dụng bản phát hành 1.0.x, thì bạn sẽ không thể thực hiện việc này dễ dàng nhưng có thể thực hiện được. Giải pháp của Mark Rajcok có vẻ như phù hợp với yêu cầu của bạn như đã nêu, nhưng tôi sẽ thêm một vài ghi chú bổ sung:

• Ngoài phiên bản 1.1.4, chỉ thị biên dịch không hỗ trợ sửa đổi khi chạy.
  • Kể từ 1.1.4, bạn có thể safely modify the attributes of compile-time directives, nhưng chỉ từ một chỉ thị thời gian biên dịch khác.
• Bạn có thể muốn xem xét replaceWith() thay vì append() từ <my-directive> không phải là một loại phần tử HTML tiêu chuẩn xác định.
• Nếu mẫu X và Y của bạn chứa các chỉ thị bổ sung, tôi không nghĩ bạn có thể chuyển các thuộc tính trên <my-template> đến phần tử gốc của mẫu của bạn dễ dàng như vậy.
  • Chỉ thị có thay thế: true sẽ chuyển thuộc tính từ phần tử nguồn sang gốc thay thế, nhưng tôi không nghĩ rằng ngInclude sẽ thực hiện tương tự từ máy chủ đến gốc của mẫu được bao gồm.
  • Tôi cũng dường như nhớ lại rằng ngInclude không yêu cầu mẫu của nó có chính xác một phần tử gốc.
  • Bạn có thể lưu giữ các thuộc tính trên phụ huynh thay thế bằng cách sử dụng replaceWith() thay vì append() và gói thẻ <div ng-include=""> trong một số <div></div>.Bên ngoài <div> có thể giữ các thuộc tính và vẫn có thể truy cập được sau khi phần tử <div ngInclude> thay thế chính nó bằng nội dung được tải.
• Lưu ý rằng ngInclude tạo phạm vi mới. Điều này cho bạn thấy một klaxons vàng nhấp nháy cảnh báo về sự nguy hiểm của các mô hình phạm vi nguyên thủy. Để biết thêm thông tin, xem this fine page from Angular's GitHub depot.

Tôi có thể đề xuất giải pháp thay thế khác cho những người dùng trên 1.0.x, nhưng nó liên quan đến số lượng mã hợp lý. Đó là một hoạt động có trọng lượng nặng hơn, nhưng nó không chỉ có khả năng chuyển đổi giữa các mẫu, mà còn là các chỉ thị chính thức. Hơn nữa, hành vi của nó là dễ dàng hơn năng động.

app.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: 'partials/directive/my-directive.html', 
     link: function(scope, element, attrs, ctrl) { 
      // You can do this with isolated scope as well of course. 
      scope.type = attrs.type; 
     } 
    } 
); 

my-directive.js

<div ng-switch on="{{type}}"> 
    <div ng-switch-where="X" ng-include="X-template.html"></div> 
    <div ng-switch-where="Y" ng-include="Y-template.html"></div> 
</div> 

my-directive.html

Answer 3

tôi giải quyết vấn đề này như vậy:

app.directive("post", function ($templateCache, $compile) { 
function getTemplate(mode) { 
    switch (mode) { 
     case "create": 
      return "createPost.html"; 
     case "view": 
      return "viewPost.html"; 
     case "delete": 
      return "deletePost.html"; 
    } 
} 

var defaultMode = "view"; 

return { 
    scope: {}, 
    restrict: "AE", 
    compile: function (elem, attrs, transclude) { 
     return function ($scope, $element, $attr) { 
      function updateTemplate() { 
       $element.html(""); 
       $compile($templateCache.get(getTemplate($scope.mode)).trim())($scope, function (clonedElement, scope) { 
        clonedElement.appendTo($element); 

       }); 
      } 

      $scope.mode = $attr.mode || defaultMode; 

      $scope.$watch("mode", updateTemplate); 
     } 
    } 
} 
}); 

Có lẽ không phải là cách tốt nhất để làm điều này , nhưng tôi không có phạm vi bổ sung.

Answer 4

góc sẽ chấp nhận một chức năng như các mẫu lựa chọn, vì vậy bạn có thể làm một cái gì đó giống như vậy:

.directive('myDirective', function() { 
    return { 
     templateUrl: function (tElement, tAttrs) { 
      if (tAttrs) { 
       if (tAttrs.type === 'X') { 
        return 'X-template.html'; 
       } 
       if (tAttrs.type === 'Y') { 
        return 'Y-template.html'; 
       } 
      } 
     } 
    } 
}); 

Mọi chi tiết, hãy xem tài liệu cho dịch vụ $compile.

Answer 5

Ok, điều này có thể giúp ai đó ở đây :-)

Để chèn tùy chỉnh của bạn vào liên kết hoặc chức năng điều khiển của bạn, hãy sử dụng như sau.

tôi tại nơi làm việc ngay bây giờ nhưng sẽ gửi một fiddle sau này nếu tôi có cơ hội :-)

.directive('yourDirective', function() { 
    return { 
    restrict: 'EA', 
    template: '<div></div>', // or use templateUrl with/without function 
    scope: { 
     myAttibute: '@myAttr' // adds myAttribute to the scope 
    }, 
    link: function(scope) { 
     console.log(scope.myAttibute); 
    } 
    } 
} 

// HTML ""

// Bảng điều khiển sẽ ra "foo"

Answer 6

Đây là phiên bản của tôi cho tùy chọn trọng một mẫu mặc định

templateUrl: function (elem, attrs) { 
    if (attrs.customTemplate) { 
    return '/path/to/components/tmpl/' + attrs.customTemplate + '.html'; 
    } else { 
    return '/path/to/components/tmpl/directive.html'; 
    } 
} 

ví dụ trên chỉ

<div my-directive custom-template="custom"></div>