方法绑定在Angular

时间:2017-05-25 07:41:22

标签: angularjs angular-material

我试图在一个指令中附加一个控制器范围方法但是当我点击指令按钮时,没有调用链接方法。请检查代码。有side-nav指令,其中我附加了select参数的方法。但是当单击按钮时,不会调用方法。

的index.html

 <div class="container" layout="row" flex ng-controller="userController as vm" ng-init="vm.loadUsers()">
        <md-sidenav md-is-locked-open="true" class="md-whiteframe-1dp">
           <side-nav users="vm.users" select="vm.selectUser(user)"></side-nav>

        </md-sidenav>
        <md-content id="content" flex>
           <user-detail selected="vm.selected" share="vm.share()"></user-detail>           
        </md-content>
    </div>

userController.js

app.controller("userController", ['$scope', 'userService', '$mdBottomSheet', function ($scope, userService, $mdBottomSheet) {
    var self=this;
    self.users = [];
    this.name = "manish";

    self.loadUsers = function () {
        userService
            .loadAllUsers()
            .then(function (users) {
                self.users = users;
                self.selected = users[0];
                userService.selectedUser = self.selected;                
            });
    }

    self.selectUser = function (user) {
        self.selected = user;
        userService.selectedUser = self.selected;
    }

}]);

directives.js

app.directive("sideNav", function () {
    return {
        restrict :'AE',
        templateUrl: './views/sidenav.html',
        scope : {
            select : '&',
            users : '='
        }
    }
});

./视图/ sidenav.html

<md-list>
    <md-list-item ng-repeat="user in users">
        <md-button ng-click="select({user:user)">
            <md-icon md-svg-icon="{{user.avatar}}" class="avatar"></md-icon>
            {{user.name}}
        </md-button>
    </md-list-item>
</md-list>

1 个答案:

答案 0 :(得分:1)

尝试这样做:

的index.html

<side-nav users="vm.users" select="vm.selectUser"></side-nav>

./视图/ sidenav.html

<md-button ng-click="select()(user)">