Question

我创建了一个custom directive，其中我已经text box，我希望在控制器中获取model值。我试图找到它，但没有成功。

这是我的directive代码

app.directive("bhAddCategory", ["$rootScope", "$timeout", "CategoryFactory", "ArticleFactory", "RecentArticleFactory", "focus", function ($rootScope, $timeout, CategoryFactory, ArticleFactory, RecentArticleFactory, focus) {
        return {
            scope: {
                display: '=bhCategoryToggle',
                imageOverflow: '=bhImageOverflow',
                textBoxCss: '@bhTextBoxCss',
                rmText: '=bhRmText'
            },
            replace: true,
            template: '<div>' +
            '<div class="pull-left forDrop"><input type="text" focus-on="focusMe" ng-class="myColonyList" class="effect1" placeholder="Add a colony" data-ng-model="newCategoryName" data-ng-trim="true" ng-keypress="pressEnter($event)"></div>' +
            '<div class="pull-right"><a href=""><img src="/images/greyplus.png" ng-class="{imageoverflow: imageOverflow}" ng-show="loadplus" data-ng-click="addCategory()" alt="add category"><img src="/images/loader.gif" ng-class="{imageoverflow: imageOverflow}" alt="" ng-show="loadgif" class="colonyloder"></a></div >' +
            '</div>',
            link: function (scope, element, attrs) {
                scope.loadplus = true;

                scope.pressEnter = function (keyEvent) {
                    if (keyEvent.which === 13)
                        scope.addCategory();
                };

                scope.resetNewCategoryName = function () {
                    if (scope.rmText) {
                        scope.newCategoryName = '';
                    }
                };

                scope.addCategory = function () {
                    scope.display = false;
                    var addNewCat = scope.newCategoryName;
                    commonNotification($rootScope, true, false, '', '');
                    var categoryData = {
                        category_name: addNewCat,
                        category_type: 0
                    };

                    if (addNewCat !== undefined && addNewCat !== '') {
                        scope.loadgif = true;
                        var category_details = CategoryFactory.nameExists(addNewCat);
                        if (!category_details.exist) {
                            CategoryFactory.addAtPostion(categoryData, category_details.mid)
                            .then(function (category) {
                                    scope.loadgif = false;
                                    scope.resetNewCategoryName();
                                    commonNotification($rootScope, false, true, true, category.success);
                                    $timeout(function () {
                                        $rootScope.newStatus = false;
                                    }, 3000);
                                }, function (error) {
                                    commonNotification($rootScope, false, true, true, error.message);
                                    $timeout(function () {
                                        $rootScope.newStatus = false;
                                    }, 3000);
                                });
                        } else {
                            scope.loadgif = false;
                            commonNotification($rootScope, false, true, true, 'Category name already exists!');
                            $timeout(function () {
                                $rootScope.newStatus = false;
                            }, 2000);
                        }
                    } else {
                        commonNotification($rootScope, false, true, true, 'Category name is required!');
                        $timeout(function () {
                            $rootScope.newStatus = false;
                        }, 2000);
                    }
                };
            }
        };
    }]);

这是我的控制器

app.controller('bookmarkCtrl', ["$scope", "$http", "$rootScope", "$timeout", "RecentArticleFactory", "CategoryFactory", "ArticleFactory", "focus", "debounce", "userFactory", function ($scope, $http, $rootScope, $timeout, RecentArticleFactory, CategoryFactory, ArticleFactory, focus, debounce, userFactory) {
}]);

我可以获得任何有效的演示，以便我能够理解并实现我的代码

先谢谢

Answer 1

在您的指令上使用父范围执行参数。这是一个范围函数，它在您的父控制器上声明，并且只要您想要将某些内容传递给控制器，就可以从指令中调用。为了实现这一点，我们在指令中用'＆amp;'声明了一个范围参数。前缀

请参阅我为另一个答案创建的示例

http://jsfiddle.net/jwd3gywz/26/

JS

angular.module('components', []).controller('Composer', function Composer($scope, $http) {


    // adding snippet to composed text
    $scope.composed_text = '';
    $scope.updateCaretPosition=function(pos){
    $scope.caret_position=pos;
        console.log('called'+pos); 
    }
    $scope.$watch('caret_position',function(){
        console.log($scope.caret_position); 
    })

}).directive('caretPosition', function() {
    return {
        scope:{updateCaretPosition:'&'},
        link: function(scope, element, attrs) {
            element.bind('keyup click', function(e){
                var caret_position = element[0].selectionStart;
                scope.updateCaretPosition({pos:caret_position});
                console.log('my current position: ' + caret_position);
            });
        }
    }
});
angular.module('myApp', ['components'])

HTML

<!doctype html>
<html ng-app="myApp">
<body>
    <div ng-controller="Composer">
        <textarea class="form-control composed_text" ng-model="composed_text" update-caret-position="updateCaretPosition(pos)" caret-position=""  rows="20"></textarea>
    </div>
</body>
</html>

如何在Angular中从指令到控制器获取ng-model值？

1 个答案: