在ng-click子项上触发了父ng-click操作(来自child,需要访问$ parentNodesScope for angular-tree-ui)

时间:2017-07-30 19:34:22

标签: javascript jquery angularjs angularjs-directive angularjs-scope

我正在尝试发布Form并将angular-ui包含为表单中的元素之一(http://plnkr.co/edit/6S881qNp3v7UI4Bo9pko?p=preview),每当我点击“Insert Below”时,表单就会被发布(除了插入另外一个输入外)领域) event.stopPropagation()也不能用于添加树ui,我必须在父节点上占用范围,一旦我得到它,父节点的ng-click也被调用

家长控制器

var app = angular.module('crudApp', [ 'ui.router', 'ngStorage', 'clockApp',
    'myApp', 'plunker', 'radioB', 'timeTicker', 'TodoApp' ]);
app.constant('urls', {
BASE : 'localhost:3030',
USER_SERVICE_API : 'localhost:3030'
});

app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        $stateProvider.state('home', {
            url : '/',
            templateUrl : 'partials/list',
            controller : 'UserController',
            controllerAs : 'ctrl',
            resolve : {
                users : function($q, UserService) {
                    console.log('Load all users');
                    var deferred = $q.defer();
                    UserService.loadAllUsers().then(deferred.resolve,
                            deferred.resolve);
                    return deferred.promise;
                }
            }
        });
        $urlRouterProvider.otherwise('/');
    } ]);

儿童控制器

var app = angular.module('plunker', ['ui.tree']);
app.directive('focus', function($timeout) {
return {
    restrict: 'AC',
    link: function(scope, element) {
        $timeout(function(){
            element[0].focus();
        }, 0);
    }
};
});

app.controller('MainCtrl', function($scope) {
      $scope.nodes = [{
                    value: "",
                    price: "",
                    nodes: []
                }]
});

查看 - list.ftl

一切正常,但数据是从子控制器保存的     ng-click而不是parent(表单输入)

<div class="generic-container">
<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">
        <span class="lead">User </span>
    </div>


    <div class="panel-body">
        <div class="formcontainer">
            <div class="alert alert-success" role="alert"
                ng-if="ctrl.successMessage">{{ctrl.successMessage}}</div>
            <div class="alert alert-danger" role="alert"
                ng-if="ctrl.errorMessage">{{ctrl.errorMessage}}</div>

            <form ng-submit="ctrl.submit()" name="myForm" class="form-
horizontal">
                <input type="hidden" ng-model="ctrl.user.id" />
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="col-md-2 control-lable" 
for="uname">Name</label>
                        <div class="col-md-7">
                            <input type="text" ng-model="ctrl.user.name" 
id="uname"
                                class="username form-control input-sm"
                                placeholder="Enter your name" required ng-minlength="3" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="col-md-2 control-lable" for="pnumber">Phone
                            Number</label>
                        <div class="col-md-7">
                            <input type="text" ng-model="ctrl.user.pnumber" id="pnumber"
                                class="username form-control input-sm"
                                placeholder="Phone Number" required ng-minlength="3"
                                ng-maxlength="10" ng-pattern="ctrl.onlyNumbers" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="col-md-2 control-lable" for="address">Address</label>
                        <div class="col-md-7">
                            <input type="text" ng-model="ctrl.user.address" id="address"
                                class="username form-control input-sm" placeholder="Address"
                                required ng-minlength="3" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="col-md-2 control-lable" for="work">Work</label>
                        <div class="col-md-7">
                            <input type="text" ng-model="ctrl.user.work" id="work"
                                class="username form-control input-sm" placeholder="Work"
                                required ng-minlength="3" />
                        </div>
                    </div>
                </div>

                    <div class="row">
                    <div class="form-group col-md-12">
                        <label class="col-md-2 control-lable" for="price">Price</label>
                        <div class="col-md-7">
                            <input type="text" ng-model="ctrl.user.price" id="price"
                                class="form-control input-sm" placeholder="Price" required
                                ng-pattern="ctrl.onlyNumbers" />
                        </div>
                    </div>
                </div>

                <!-- Adding multinode value - start    -->


                <div ng-controller="MainCtrl">

                    <script type="text/ng-template" id="nodes_renderer.html">
                        <div ui-tree-handle>
                            <div class='form-group'>
                                <input class='username form-control input-sm' ng-model='node.value' focus>
                                <input class='form-control' ng-model='node.price' focus>
                            </div>

                                <button class='btn btn-primary btn-sm' ng-click='$parentNodesScope.$modelValue.splice($index+1,0,{value:"New", nodes:[]});'>Insert below</button>
                                <button class='btn btn-primary btn-sm' ng-click='node.nodes.push({value: "New", nodes:[]});'>Insert child</button>


                        </div>

                    </script>
                    <div ui-tree>
                        <ol ui-tree-nodes ng-model="nodes" id="tree-root">
                            <li ng-repeat="node in nodes" ui-tree-node ng-include="'nodes_renderer.html'"></li>
                        </ol>
                    </div>
                    {{nodes}}
                </div>



                <div class="row">
                    <div class="form-actions floatRight">

                        <input type="submit" value="{{!ctrl.user.id ? 'Add' : 'Update'}}"
                            class="btn btn-primary btn-sm"
                            ng-disabled="myForm.$invalid || myForm.$pristine">
                        <button type="button" ng-click="ctrl.reset()"
                            class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Reset
                            Form</button>

                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

0 个答案:

没有答案