Cách nhận giá trị thuộc tính của thẻ tùy chỉnh trong angularjs?

Question

Tôi đang cố gắng tạo một thẻ tùy chỉnh bằng angularJs. Thẻ này có thuộc tính có tên là data. data nhận giá trị như thế này <skillviz data="{{user.info}}"></skillviz>. user.info là một đối tượng JSON. Nhưng khi tôi cố truy cập thuộc tính data này trong định nghĩa chỉ thị của mình, tôi nhận được undefined. Cách chính xác để làm điều này là gì ?

mã html

<div id="info-box" ng-repeat="user in users | orderBy:orderProp">    
      <div id="skill-block"> 
      <skillviz height="50" data="{{user.skills}}"></skillviz> 
      </div> 
     </div> 

users là một đối tượng kiểu JSON, tuyên bố trong bộ điều khiển. Vì vậy, về cơ bản users sẽ là một danh sách (mảng) của

{"first_name": "Tifanny", 

     "last_name": "Maxwell", 
     "skills": [ 
      {"name": "Java", "score": 4.8, "color" : "red"}, 
      {"name": "C++", "score": 4.0, "color" : "blue"}, 
     ] 
    }, 

services.js

angular.module('yott', []).directive('skillviz', function() { 
return { 
    restrict: 'E', 
    link: function (scope, element, attrs) { 
     element.html("<script>alert(" + attrs['data'] + ")</script>"); 
     }); 
    } 
    } 
}); 

hộp cảnh báo bật lên nói không xác định

Answer 1

Sử dụng $observe để quan sát những thay đổi thuộc tính :

attrs.$observe('data', function(value) { 
    console.log('data has changed value to ' + value); 
}); 

Và $set để thay đổi giá trị:

attrs.$set('data', 'new value'); 

Hoặc bạn có thể vượt qua/liên kết nó vào phạm vi chỉ sử dụng @ (ràng buộc một phạm vi địa phương), & (cung cấp một cách để thực hiện một biểu thức trong bối cảnh của phạm vi mẹ) hoặc = (thiết lập hai chiều ràng buộc) - giải thích here

angular.module('yott', []).directive('skillviz', function() { 
    return { 
     restrict: 'E', 
     scope { data: "=data" }, 
     link: function (scope, element, attrs) { 
      element.html("<script>alert(" +scope.data + ")</script>"); 
      }); 
     } 
     } 
    }); 

Answer 2

Hãy nói rằng bạn có đánh dấu sau:

<div ng-controller="MyController" data-id="someCustomValue"> 
</div> 

Bây giờ trong điều khiển của bạn, bạn có thể làm như sau để truy cập dữ liệu -id:

app.controller('MyController', function ($scope, $attrs) { 
    console.log($attrs.id); // Prints 'someCustomValue' 
});