md-autocomplete with error:无法读取undefined的属性“success”

时间:2015-05-13 20:13:31

标签: javascript angularjs

我使用了材质angular作为框架和md-autocomplete,但是我收到了这个错误:无法读取undefined属性'success' 这是我的代码:

/*My app.js*/
var app = angular.module('app', ['ngRoute', 'ngMaterial']); //, 'ui.utils.masks'

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', { controller: 'DemoCtrl', templateUrl: 'view/paginaTeste.html' })
        .otherwise({ templateUrl: '404.html' });
});

app.run(function ($rootScope) {
    $rootScope.urlServico = 'http://localhost:58999/';
});


/*My controller*/
(function () {
    'use strict';
    angular
        .module('app')
        .controller('DemoCtrl', DemoCtrl)
        .config(function ($mdThemingProvider) {
            $mdThemingProvider.theme('default')
                .primaryPalette('blue');
        });;

    function DemoCtrl($timeout, $q) {
        var self = this;

        // list of `state` value/display objects
        self.states = loadAll();
        self.selectedItem = null;
        self.searchText = null;
        self.querySearch = querySearch;

        // ******************************
        // Internal methods
        // ******************************

        /**
         * Search for states... use $timeout to simulate
         * remote dataservice call.
         */
        function querySearch(query) {
            var results = query ? self.states.filter(createFilterFor(query)) : [];
            return results;
        }

        /**
         * Build `states` list of key/value pairs
         */
        function loadAll() {
            var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';

            return allStates.split(/, +/g).map(function (state) {
                return {
                    value: state.toLowerCase(),
                    display: state
                };
            });
        }

        /**
         * Create filter function for a query string
         */
        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(state) {
                return (state.value.indexOf(lowercaseQuery) === 0);
            };

        }
    }
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
</head>
<body>

    <div layout="column" ng-view></div>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>

    <script src="/view/app.js"></script>

    <script src="/view/controller/DemoCtrl.js"></script>
</body>
</html>

修改 这是我的页面paginaTeste.html:

<md-content>
<form name="frmTeste">
    <section>
        <md-subheader class="md-primary">Novo Teste</md-subheader>
        <md-list layout="column" layout-padding>
            <md-item>
                <md-item-content>
                    <p>The following example demonstrates floating labels being used as a normal form element.</p>
                    <div layout-gt-sm="row">
                        <md-input-container flex>
                            <label>Name</label>
                            <input type="text" />
                        </md-input-container>
                        <md-autocomplete flex
                                         ng-disabled="DemoCtrl.isDisabled"
                                         md-no-cache="DemoCtrl.noCache"
                                         md-search-text="DemoCtrl.searchText"
                                         md-items="item in DemoCtrl.querySearch(ctrl.searchText)"
                                         md-item-text="item.display"
                                         md-floating-label="Favorite state">
                            <span md-highlight-text="DemoCtrl.searchText">{{item.display}}</span>
                        </md-autocomplete>
                    </div>
                </md-item-content>
            </md-item>
        </md-list>
    </section>
</form>

我不知道我的代码有什么问题,有人可以帮助我吗? PS:我很抱歉我的英文版

感谢的。

2 个答案:

答案 0 :(得分:0)

我认为您的md-items绑定存在错误。请尝试以下方法:

  md-items="item in DemoCtrl.querySearch(DemoCtrl.searchText)"

它看起来像是绑定到DemoCtrl。*但不使用Controller As语法。尝试更改路线定义,如下所示:

{ controller: 'DemoCtrl', controllerAs: 'DemoCtrl', templateUrl: 'view/paginaTeste.html' }

答案 1 :(得分:0)

我设法解决了我的问题,这个变量的名称是错误的,所以这是我的示例代码:

<强>索引

<!DOCTYPE html>

              

<div layout="column" ng-view></div>

<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>

<script src="/view/app.js"></script>

<!--<script src="/view/angular-material.min.js"></script>-->


<script src="/view/demo-auto-complete/controller/DemoCtrl.js"></script>

<强> App.js

var app = angular.module('app', ['ngRoute', 'ngMaterial', 'ngMessages']);

    app.config(function ($routeProvider) {
        $routeProvider
            .when('/', { controller: 'DemoCtrl', controllerAs: 'self', templateUrl: 'view/demo-auto-complete/paginaTeste.html' })
            .otherwise({ templateUrl: '404.html' });
    });

    app.run(function ($rootScope) {
        $rootScope.urlServico = 'http://localhost:58999/';
    });

DemoCtrl.js - 我的控制器

(function () {
    'use strict';
    angular
        .module('app')
        .controller('DemoCtrl', DemoCtrl)
        .config(function ($mdThemingProvider) {
            $mdThemingProvider.theme('default')
                .primaryPalette('blue');
        });;

    function DemoCtrl($timeout, $q) {
        var self = this;

        // list of `state` value/display objects
        self.states = loadAll();
        self.selectedItem = {
            display: 'Alabama',
            value: 'alabama'
        };
        self.searchText = null;
        self.querySearch = querySearch;
        self.clearValue = clearValue;
        self.save = save;
        self.myModel = '';

        function clearValue() {
            self.myModel = undefined;
        };
        function save() {
            alert('Form was valid!');
        };

        // ******************************
        // Internal methods
        // ******************************

        /**
         * Search for states... use $timeout to simulate
         * remote dataservice call.
         */
        function querySearch(query) {
            var results = query ? self.states.filter(createFilterFor(query)) : [];
            return results;
        }

        function findValues (term, obj) {
            var deferred = this.$q.defer();
            deferred.resolve( this.$filter( 'filter' )( obj, term ) );
            return deferred.promise;
        }

        /**
         * Build `states` list of key/value pairs
         */
        function loadAll() {
            var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';

            return allStates.split(/, +/g).map(function (state) {
                return {
                    value: state.toLowerCase(),
                    display: state
                };
            });
        }

        /**
         * Create filter function for a query string
         */
        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(state) {
                return (state.value.indexOf(lowercaseQuery) === 0);
            };

        }
    }
})();

paginaTeste.html - 我的观点

<md-content>
    <form ng-submit="$event.preventDefault()" name="frmParceiroNegociosEndereco">
        <section>
            <md-subheader class="md-primary">Novo Endereço</md-subheader>
            <md-list layout="column" layout-padding>
                <md-item>
                    <md-item-content>
                        <p>The following example demonstrates asdasdasda floating labels being used as a normal form element.</p>
                        <div layout-gt-sm="row">
                            <md-input-container flex>
                                <label>Name</label>
                                <input type="text" />
                            </md-input-container>
                        <md-autocomplete flex
                                             md-input-name="autocompleteField"
                                             md-no-cache="self.noCache"
                                             md-selected-item="self.selectedItem"
                                             md-search-text="self.searchText"
                                             md-items="item in self.querySearch(self.searchText)"
                                             md-item-text="item.display"
                                             md-floating-label="Favorite state">
                                <md-item-template>
                                    <span md-highlight-text="self.searchText">{{item.display}}</span>
                                </md-item-template>
                            </md-autocomplete>
                        </div>
                        <h1>Teste</h1>
                    </md-item-content>
                </md-item>
            </md-list>
        </section>
    </form>
</md-content>

我帮助过某个人,并感谢所有帮助过我的人。