尝试将值从HTML发送到控制器

时间:2016-07-23 14:30:51

标签: angularjs-directive

我正在尝试将值从html发送到控制器但不会转到控制器。此代码值的问题是在控制器和工厂显示未定义。我希望这段代码易于理解:

WITH 
  SET [N_names] AS
     FILTER(
           [Related Assignee History].[Modified By Id].[Modified By Id].MEMBERS
          ,Left([Related Assignee History].[Modified By Id].CurrentMember.MEMBER_CAPTION,1) = 'N'
     )
  SET [N_names_plusDates] AS
     GENERATE(
        [N_names] AS N
        ,   N.CURRENTMEMBER
          * TAIL(
               NONEMPTY(
                 [Related Assignee History].[Start Date Time].[Start Date Time].MEMBERS
                ,N.CURRENTMEMBER
               )
             )
     )
SELECT 
 NON EMPTY 
   [Measures].[Count of Assignee Reassignments] ON 0, 
 NON EMPTY 
    [N_names_plusDates]
   *[Related Assignee History].[Parent Incident Id].[Parent Incident Id].ALLMEMBERS
FROM [Incident]
WHERE 
 ([Date Reported].[Year].&[2016]
 ,[Incident].[Owner Group].&[Directors Group]
 ,[Incident].[Reported Source].&[Self Service]);

我的观点:

var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function($scope, loginfactory) {
    $scope.showModal = false;
    $scope.toggleModal = function() {
        $scope.showModal = !$scope.showModal;
    };
    $scope.doLogin = function() {
        var promise = loginfactory.logincheck($scope.userid, $scope.pwd);
    }
});
mymodal.factory("loginfactory", function($http, $q) {
    return {
        "logincheck": function(userid, pwd) {
            console.log(userid);
            console.log(pwd);
            return Object;
        }
    };
});
mymodal.directive('modal', function() {
    return {
        template: '<div class="modal fade">' +
            '<div class="modal-dialog">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="">×</button>' +
            '<h4 class="modal-title">{{ title }}</h4>' +
            '</div>' +
            '<div class="modal-body" ng-transclude=""></div>' +
            '</div>' +
            '</div>' +
            '</div>',
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: true,
        link: function postLink(scope, element, attrs) {
            scope.title = attrs.title;
            scope.$watch(attrs.visible, function(value) {
                if (value == true)
                    $(element).modal('show');
                else
                    $(element).modal('hide');
            });
            $(element).on('shown.bs.modal', function() {
                scope.$apply(function() {
                    scope.$parent[attrs.visible] = true;
                });
            });
            $(element).on('hidden.bs.modal', function() {
                scope.$apply(function() {
                    scope.$parent[attrs.visible] = false;
                });
            });
        }
    };
});

1 个答案:

答案 0 :(得分:0)

这就是我的意思see Plunker;
在您的指令中,您使用了:scope: true,这意味着指令中的更改不会反映在父作用域Look at this上,因此要使其工作,您必须这样做。在提交btton :(角度最佳实践从视图传递范围)

<button  ng-click="doLogin(userid,pwd)" class="btn btn-default">submit</button>

在你的控制器中:

$scope.doLogin = function(userid,pwd) {
    var promise = loginfactory.logincheck(userid, pwd);
}

你知道我没有在你的loginfactory中传递$ scope.userid和$ scope.pwd,但是因为scope: true,而导致你的代码无法正常工作,因此会从视图中传递值

最后一个建议,您可以使用UI引导程序进行角度调整,这样您就不必与jquery引导程序混合使用。 UI Bootstrap