相关疑难解决方法(0)

我开始编写指令,我很确定我掌握了为指令定义'isolate'范围的整个概念.

我的指令numberRoulette应该fields="some-number-here"用随机数为所提供的数字中的每个数字(或通过属性提供的数字位数)设置动画.每经过一秒钟,一位数停止动画并设置为其预期数字.它有点像老虎机..

<div ng-app="myApp">
  <div ng-controller="MasterCtrl">
    <span number-roulette fields="10" ng-model="number">
      {{number}}
    </span>
  </div>
</div>

我遇到的问题是,当我在指令范围和控制器使用的范围之间进行双向绑定时MasterCtrl,我的值将停止显示.

app.directive('numberRoulette', function($timeout) {
  return {
    restrict: 'A',
    scope: {showNumber: '=ngModel'},
    ...
  };
});

function MasterCtrl($scope) {
  $scope.number = 1000;
}

JSFiddle:http://jsfiddle.net/nguyening/aX6Zm/3/

目标是创造这个

<h3>11.4.2013</h3>
<ul>
 <li>entry 1</li>
 <li>entry 2</li> 
 <li>entry 3</li>
</ul>

<h3>10.4.2013</h3>
<ul>
 <li>entry 4</li>
 <li>entry 5</li> 
 <li>entry 6</li>
</ul>

由此

[
    {
        "name": "entry1",
        "date": "11.4.2013"
    },
    {
        "name": "entry2",
        "date": "11.4.2013"
    },
    {
        "name": "entry3",
        "date": "11.4.2013"
    },
    {
        "name": "entry4",
        "date": "10.4.2013"
    },
    {
        "name": "entry5",
        "date": "10.4.2013"
    },
    {
        "name": "entry6",
        "date": "10.4.2013"
    }
]

问题是ng-repeat必须打开,li所以我永远不能用ng-repeat做到这一点,是吗？我发现这个来自Mark Rajnoc的http://jsfiddle.net/mrajcok/CvKNc/示例,但它仍然非常有限......

我还有其他选择吗？写我自己的ng-repeat like指令？或者还有其他方法可以不写一个吗？

我是angularjs的新手.我正在努力学习$watch财产.这是我的plunker.

rootScope.$watch属性仅在页面加载时执行,而不在文本更改事件上执行.但它适用于$scope.$watch.

我有一个2个范围的控制器:

app.controller('search', function($scope) {
    $scope.value1 = '';
    $scope.value2 = 'Some text' + $scope.value1;
}

和输入字段:

<input type="text" ng-model="value1">

当我使用输入字段(有效)更改value1时,value2不会更新.我怎样才能做到这一点？

http://jsfiddle.net/MTzJF/36/

上面的JSFiddle是为解释这个问题而设立的.但是,基本上:

HTML:

<breadcrumb></breadcrumb>
<div ng-view></div>

角度指令和路由:

angular
    .module('app', [])
    .directive('breadcrumb', function() {
        return {
            restrict: 'E',
            template: "<ul class='breadcrumb'><li ng-repeat='node in path'><a ng-href='{{node.url}}'>{{node.label}}</a></li></ul>",
            replace: true,
            controller: Ctrl1
        }
    })
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/', { 
                template: '<h1>{{pgTitle}}</h1>', 
                controller: Ctrl2
            });
    }]);

控制器

function Ctrl1($scope) {
    $scope.path = [{
            label: 'Home',
            url: '#/'}];
    $scope.pgTitle = "Home"       
}
function Ctrl2($scope, $routeParams) {
    $scope.path = [{
            label: 'Home',
            url: '#/'},{
            label: 'Node 2',
            url: '#/node2'}];
    $scope.pgTitle = "Node 2"
}

我希望 …

说我有角度的一些HTML:

 <input type='text' ng-model='stuff' /> {{stuff}}
 <button class="primary" ng-click='dothestuff()'>Do the stuff</button>

在控制器中有以下内容:

$scope.stuff = 'arf';
$scope.dothestuff = function () {
    $window.alert($scope.stuff);    
};

这个代码将输入输入并在我按下按钮时输出它.

一切顺利.

但是现在我想创建一个包含div中元素的指令(因此它以深灰色背景显示).

我创建了一个指令,它将转换元素并用div包装它们:

testapp.directive('wrapper', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: false,
        transclude: true,
        template: '<div style="background:#666"><div ng-transclude></div></div>'
    };
});

但是,当然,该指令将为转换元素创建一个新范围.该输入元素不再是指东西财产击中按钮时会得到输出.

我可以通过引用$ parent来使它工作:

 <input type='text' ng-model='$parent.stuff' /> {{stuff}}

但是,我不愿意.我想用我的新指令包装时尽可能保持html不受影响.

如何使transcluded元素直接引用父作用域？

这是一个有问题的jsFiddle.

我们对此很新.最后设法让ui-Bootstrap使用日期控件: -

<div class="col-md-2 box" ng-controller="ResultFilter" >  
<h2>Filter</h2>

    <p class="input-group" ng-controller="DatepickerDemoCtrl">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.startdate" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
        <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event, 'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
   <p class="input-group" ng-controller="DatepickerDemoCtrl">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.enddate" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
        <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event, 'opened2')"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
 <p class="input-group">
    <select class="form-control" ng-model="resultfilter.frequency">
  <option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Yearly">Yearly</option>
</select>
      </p>
</div> …

我的变量没有在控制器中更新,我不明白为什么.

在视图中我有这个代码

<div ng-if="state_1">
    <input ng-model='amount'> {{amount}} <!-- this binds perfectly -->
    <button ng-click='submitForm()'>Submit</button>
</div>
<div ng-if="state_2">
    <input ng-model='txcode'> {{txcode}} <!-- this binds perfectly -->
    <button ng-click='submitCode()'>Submit</button>
</div>

在控制器中:

angular.module('myapp')
   .controller('RecCtrl', function($scope, $state, $rootScope, $http) {
      $scope.submitForm = function(){
         console.log($scope.amount);    //returns undefined 
      }
   })

我按照这个答案并通过从视图中amount传入submitForm()来解决它.但现在我需要使用一个值,$rootScope 但没有任何显示.除此之外,在此控制器中没有任何作用$scope.submitForm().每个其他控制器工作正常.

如果有帮助,有2个状态使用相同的控制器和模板,如下所示:

//initiate payment tx 
    .state('rec', {
      url: '/receive',
      templateUrl: 'views/rec.html',
      controller: 'RecCtrl'
    })

    //claim payment tx 
    .state('claim', {
      url: '/claim',
      templateUrl: 'views/rec.html',
      controller: 'RecCtrl'
    })

我用它 …

我有ng-if两个级别的条件.如果第一个div中的第一个条件满足第二个div应该显示.同样,如果第二个ng-if满足第三个div应该显示.但我能够只看到第二个div.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div><input type="number" ng-model="temp"></div>
<div ng-if="temp>40">
  <input type="radio" ng-click="temp2=true">Yes
  <input type="radio" ng-click="temp2=false">No
</div>
<div ng-if="temp2">
  <p>Some content</p>
</div>

如果我使用,最后一个div显示ng-show.但我不能使用ng-show.还有一些div基于这些条件工作.请帮助我这方面

我有dropdowns3.Dropdown首先控制,out Dropdown 2和Dropdown 3哪个下拉列表填充.

我正在使用这个ng-if,我可以使用ng-if第二个下拉列表,但是当我无法使用ng-if第三个下拉列表时.

我弄清楚的原因是,dropdown 2它没有绑定任何值.

我不知道为什么会这样.

码

<select ng-model="selcetedValue">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
</select>
<select ng-model="selcetedValueSecond" ng-if="selcetedValue === 'B'">
  <option value="E">E</option>
  <option value="F">F</option>
  <option value="G">G</option>
  <option value="H">H</option>
</select>
<select ng-model="selcetedValueThird" ng-if="selcetedValueSecond === 'H'">
  <option value="I">I</option>
  <option value="J">J</option>
  <option value="K">K</option>
  <option value="L">L</option>
</select>

<p>Selected value from first dropdown:: <i>{{selcetedValue}}</i></p>
<p>Selected value from second dropdown:: <i>{{selcetedValueSecond}}</i></p>

请帮忙.

所以我的控制器的结构可能是罪魁祸首.在这里您可以看到父控制器和子控制器,但重要的部分在这里:

家长控制器

//Load version
$scope.person = People.people.get({ id: $routeParams.id}, function(person) {
     var associations = {
         events: person.events || [],
         people: person.people || [],
         places: person.places || []
     };
     $scope.$broadcast('setAssociations', associations);
});
//Event version
$scope.$on('getAssociations', function(e, args) {
  var associations = {
    events: $scope.person.events || [],
    people: $scope.person.people || [],
    places: $scope.person.places || []
  };
  $scope.$broadcast('setAssociations', associations);
});

儿童控制器

$scope.$on('setAssociations', function(event, args) {
    $scope.parentEvents = args.events;
});

$scope.$emit('getAssociations', {});

我的想法是我需要events从父person对象到子控制器.问题是,每个setAssociations从父母抚养的方法只能在一个上下文中工作.

load …

我试图通过指令更改控制器范围,但它不会更改.

当我通过指令更改模型时,goas将自动更改$scope.modulesin MyCtrl:

link: function (scope) {
    scope.module.title += ' changed';

    scope.module = {
        title: 'Redeclared'
    };
},

这段代码完美无缺 scope.module.title += ' changed';

但这不是: scope.module = { title: 'Redeclared' };

在$ http.get请求之后,我们有一个对象,{title: 'Redeclared'}这就是为什么我这样做scope.module = { title: 'Redeclared' };

示例:http://jsfiddle.net/8Va9Q/

知道怎么做吗？谢谢

我有一个带有一些按钮的按钮组，两个用 html 创建，其他用 ng-repeat 创建。我希望单击按钮时有一个活动类，以便我可以自定义它以显示它已激活。

所以这就是我所做的：

<div class="btn-group" role="group" aria-label="Basic example"
     ng-init="selectedTab = 'raw'">

  <button class="btn"
     ng-click="selectView('raw'); selectedTab = 'raw'; console.log(selectedTab);"
     ng-class="{'active':selectedTab === 'raw'}">Raw data
  </button>
  <button class="btn"
     ng-click="selectView('summary'); selectedTab = 'summary'; console.log(selectedTab);"  
     ng-class="{'active':selectedTab === 'summary'}">Summary
  </button>

  <button class="btn" ng-repeat="(key, value) in views"
          ng-click="selectView(key); selectedTab = key; console.log(selectedTab);"
          ng-class="{'active':selectedTab === key}">
    {{ key }}
  </button>
</div>

我的问题是，对于两个第一个都正常工作，当我点击第一个按钮时，类被添加，当我点击第二个时，类从第一个中删除并添加到第二个中。

问题在于 ng-repeat 生成的按钮，当我点击它们时，它会将活动类添加到按钮中，但是当我点击另一个按钮时，它不会删除该类，因此它们都可以拥有 activate 类。

我究竟做错了什么 ？