AngularJS-函数永不控制

Question

首先，我真的希望大家的理解和宽容。 这个问题是非常具体的，因此请不要再激进，低票，搁置或滥用。 我们所有人都是在这里学习新知识并分享知识，而不是侵略性。 非常感谢。

问题：我正在尝试遵循此示例，但是函数newState在link中工作时似乎未获得控制。 谁能确切地说出为什么没有发生？

<!DOCTYPE html>
<html ng-app="myapp">
    <head>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

    <script type="text/javascript">

          angular
              .module('myapp', ['ngMaterial'])
              .controller('DemoCtrl', DemoCtrl);

          function DemoCtrl ($timeout, $q, $log) {
            var self = this;
            self.simulateQuery = false;
            self.isDisabled    = false;
            // list of `state` value/display objects
            self.states        = loadAll();
            self.querySearch   = querySearch;
            self.selectedItemChange = selectedItemChange;
            self.searchTextChange   = searchTextChange;
            self.newState = newState;
            function newState(state) {
              alert("Sorry! You'll need to create a Constituion for " + state + " first!");
            }
            // ******************************
            // Internal methods
            // ******************************
            /**
             * Search for states... use $timeout to simulate
             * remote dataservice call.
             */
            function querySearch (query) {
              var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
                  deferred;
              if (self.simulateQuery) {
                deferred = $q.defer();
                $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
                return deferred.promise;
              } else {
                return results;
              }
            }
            function searchTextChange(text) {
              $log.info('Text changed to ' + text);
            }
            function selectedItemChange(item) {
              $log.info('Item changed to ' + JSON.stringify(item));
            }
            /**
             * 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);
              };
            }
          }

    </script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
    <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
      <md-content class="md-padding">
        <form ng-submit="$event.preventDefault()">
          <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
          <md-autocomplete
              ng-disabled="ctrl.isDisabled"
              md-no-cache="ctrl.noCache"
              md-selected-item="ctrl.selectedItem"
              md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
              md-search-text="ctrl.searchText"
              md-selected-item-change="ctrl.selectedItemChange(item)"
              md-items="item in ctrl.querySearch(ctrl.searchText)"
              md-item-text="item.display"
              md-min-length="0"
              placeholder="What is your favorite US state?">
            <md-item-template>
              <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
            </md-item-template>
            <md-not-found>
              No states matching "{{ctrl.searchText}}" were found.
              <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
            </md-not-found>
          </md-autocomplete>
          <br/>
          <md-checkbox ng-model="ctrl.simulateQuery">Simulate query for results?</md-checkbox>
          <md-checkbox ng-model="ctrl.noCache">Disable caching of queries?</md-checkbox>
          <md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox>
          <p>By default, <code>md-autocomplete</code> will cache results when performing a query.  After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>
        </form>
      </md-content>
    </div>

    </body>
</html>

Answer 1

奇怪，不能完全确定问题出在什么地方，而只是将Angular Material版本从1.0.0更新到1.0.6似乎可以解决此问题。 虽然现在我在进行一些有关$ apply的例外。 编辑：$ apply已经在进行中，似乎只出现在Firefox上，chrome很好。

Answer 2

这是固定在这里。 从v1.0.5起就可以了。

您可以在提供的示例页面上单击“在Codepen上编辑”图标，然后在Codepen上更改角度材质版本以进行验证。

AngularJS-函数永不控制

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-03-09 16:02:30

解决方案2
0 2016-03-09 16:29:51

AngularJS-函数永不控制

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-03-09 16:02:30

解决方案2 0 2016-03-09 16:29:51

解决方案1
1 已采纳 2016-03-09 16:02:30

解决方案2
0 2016-03-09 16:29:51