Angularjs指令之间共享控制器

Question

在实现angularjs指令时，我在指令

之间共享控制器时遇到了一些问题

我无法从以下控制器访问enterUser指令

app.directive('entires', [function () {
  return {
    restrict: 'E',
    replace: true,
    scope : {
      user : '='
    },
    require : '^?enterUser',
    template:"<div><b>Time : </b>{{user.name}}  <b>Task :</b> {{user.age}} <a ng-click='delete(user);'><u>Delete Entry</u></a> <br></div>",
    link: function (scope, iElement, iAttrs, enterUserctrl) {
     console.log(ctrl)
    //here i got enterUserctrl undefined..
    // i want like to call delete function from here
    enterUserctrl.delete(user); 


    }

  };
}])

这是当前工作fiddle

Answer 1

我稍微修改了你的代码。两个主要错误：enter-user应该包裹entires，因此角度可以为require找到它。第二个是你需要在你的情况下使用transclude。

看一下代码

app.directive('enterUser', function () {
    return {
        restrict: "A",
        transclude: true,
        templateUrl: 'enter-user.html',

        controller: function ($scope) {

            $scope.addToList = function (name, age) {
                if (typeof $scope.userName != 'undefined' && typeof $scope.userAge != 'undefined') {
                    $scope.nameList.push({
                        name: $scope.userName,
                        age: $scope.userAge
                    })
                    $scope.userName = '';
                    $scope.userAge = '';
                }
            };

            this.delete = function(user) {
                if (typeof user != 'undefined') {
                    $scope.nameList.pop();
                }
            };
        }
    };
});

输入-user.html

<div>
    <b>Name: </b>
    <input ng-model='userName' type='text' />
    <br>

    <b>Age  : </b> 
    <input ng-model='userAge' type='text' />
    <br>

    <span class='right'><button ng-click='addToList(userName, userAge);'>Add to List</button></span>

    <!-- insert trascluded content here -->
    <div ng-transclude></div>
</div>

entires指令

app.directive('entires', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            user: '='
        },
        require: '^enterUser',
        templateUrl: "entires.html",
        link: function (scope, iElement, iAttrs, enterUserCtrl) {
            scope.delete = function(user) {
                enterUserCtrl.delete(user)
            }
        }
    };
});

的index.html

<div enter-user>
    <b><u>Here is my entries listed </u></b>
    <div ng-repeat="user in nameList">
        <entires user="user"></entires>
        <br>
    </div>
</div>

演示Plunker

此外，您的删除功能无法正常工作。但这是件小事。

Answer 2

从您的代码中，<div enter-user></div>与第二个指令entires分开。

如果entires指令使用父指令enterUser，我认为应该是这样的结构：

 <div enter-user>
      <div ng-repeat="user in nameList track by $index">
          <entires user="user"></entires>
      </div>
   </div>

您可以看到可能对您有帮助的THIS演示。

  

^ - 如果在同一元素上不可用，将在父元素上查找指令。

来自儿童指令：

require : '^?enterUser',

如果我们删除?，我们将收到未找到父指令的错误。所以这是一个问题。