问

Angularjs指令之间共享控制器

zhangiloveyou 发布于 2023-02-09 14:58

function

replace

require

console

在实现angularjs指令时,我在指令之间共享控制器时遇到了一些问题

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

app.directive('entires', [function () {
  return {
    restrict: 'E',
    replace: true,
    scope : {
      user : '='
    },
    require : '^?enterUser',
    template:"Time : {{user.name}}  Task : {{user.age}} Delete Entry 
",
    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); 


    }

  };
}])

这里是当前工作的小提琴

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

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

2023-02-09 15:01 回答

mobiledu2502861847

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签