javascript - Angularjs 在指令之间共享 Controller

Question

在实现 angularjs 指令时，我在指令之间共享 Controller 时遇到了一些问题

我无法从下面的 Controller 访问 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 以便 Angular 可以为 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();
                }
            };
        }
    };
});

输入用户.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>

完整指令

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

您的删除功能也无法正常工作。但这是小事。