自定义元素指令和属性

Question

myPage.html

<div ng-controller="MyPageCtrl">
    <my-custom-directive arg1="{{currentObj.name}}"></my-custom-directive>
<div>

in myPageCtrl.js (Controller)

app.controller("MyPageCtrl", ["$scope", function ($scope) {
          $scope.currentObj = {"name":"Collin"};
    }]);

And this is how my directive code looks like

app.directive("myCustomDirective", [function () {
    return {
        restrict: "E",
        controller: "MyCustomDirCtrl"
    };
}]);

Finally here's my directive's controller,

app.controller("MyCustomDirCtrl", ["$attrs", function ($attrs) {
      var arg = $attrs.arg1;
      alert('Arg '+arg);
}]);

The alert just displays "{{currentObj.name}}" and not the value of the name property of currentObj.

Please can you suggest me ways to figure this out.

Thanks.

Answer 1

Not sure why did you use $attrs for a controller. Just use a normal $scope.

myPage.html

<div ng-controller="MyPageCtrl">
    <my-custom-directive arg1="{{currentObj.name}}"></my-custom-directive>
<div>

myPageCtrl.js (Controller)

app.controller("MyPageCtrl", ["$scope", function ($scope) {
          $scope.currentObj = {"name":"Collin"};
    }]);

myCustomDirective

app.directive("myCustomDirective", [function () {
    return {
        restrict: "E",
        controller: "MyCustomDirCtrl"
    };
}]);

Directive's controller (change $attrs to $scope here),

app.controller("MyCustomDirCtrl", ["$scope", function ($scope) {
      var arg = $scope.arg1;
      alert('Arg '+arg);
}]);

Answer 2

Instead of accessing the attr from your controller, you could access it from your directive using the link function.

app.directive("myCustomDirective", [function () {
    return {
        restrict: "E",
        controller: "MyCustomDirCtrl",
        link: function(scope, element, attr) {
            alert(attr.arg1);
        }
    };
}]);