标签: angularjs-scope

说我有角度的一些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.

这是Javascript

    function gotoUrl($scope, $location, $http, $window) {
      $scope.setRoute = function (route) {
        $location.path(route);
    };

我的代码是

      <ul class="nav navbar-nav navbar">
            <li><a href="#" data-ng-click="setRoute('summary')"><span
                    class="icon-bar-chart"></span> Summary</a></li>
            <li><a href="#
            " data-ng-click="setRoute('transactions')"><span
                    class="icon-reorder"></span>
                Transactions</a></li>
            <li><a href="#" data-ng-click="setRoute('budgets')"><span
                    class="icon-calendar"></span>
                Budgets</a></li>
        </ul>

路由配置为

app.config(function ($routeProvider) {
    $routeProvider
        .when('/summary', {templateUrl: '../static/partials/summary.html', controller: 'SummaryController'})
        .when('/transactions', { templateUrl: '../static/partials/listTransaction.html', controller: 'TransactionsManagerController'})
        .when('/profile', {templateUrl: '../static/partials/profile.html', controller: 'ProfileController'})
        .when('/new', {templateUrl: '../static/partials/addTransaction.html', controller: 'TransactionAddController'})
        .when('/budgets', {templateUrl: '../static/partials/budgets.html'})
        .otherwise({redirectTo: '/summary'});
});

当我点击时Transactions,它会带我去Summary

当我将代码更改<a>为<button>,它可以工作时,我在这里做错了什么？

所以我知道使用双向绑定,=在一个指令中,控制器的值可以传递给指令.但是,如何将隔离指令中的更改传递回控制器？

因此,例如,我有一个表单,其中有一个滑块,该滑块使用带有隔离范围的指令构建.初始值从控制器设置,然后使用隔离范围更改指令.

我正在尝试做的是当具有双向绑定的指令变量也发生变化时更改控制器的值.

有什么建议？

使用angularjs测试表单验证时遇到问题

根据angularjs表格指南,

具有ngModel指令的输入控件包含NgModelController的实例.可以使用输入控件上的name属性将此类控件实例发布为表单实例的属性.

我在plunker上创建了测试代码,一切正常,直到我更改输入名称

<input type="number" name="age" ng-model="user.age" max="100" required>

<p>{{form1.age.$error}}</p>

至

<input type="number" name="user[age]" ng-model="user.age" max="100" required>

<p>{{form1.user[age].$error}}</p>

这是否意味着angular无法识别表单输入中的数组语法？

对我来说问题是我想保持正常的表单提交流程并且只使用angular进行表单验证,所以我需要将表单输入保持为数组以使用后端表单处理

如何调用$ watctGroup表单链接函数的指令.我有两个简单的范围元素(整数),我想成对观看它们.我认为$ watchGroup比使用$ watch('[element1,element2'],...)之类的东西更有效.

我有以下代码:

<input id="id">
<button data-action="bea" ng-click="Create($('#id1')[0].value);" class="btn">Insert ID</button>
<button data-action="bea" ng-click="Create($('#id2')[0].value);" class="btn">Insert ID</button>

在JS我有:

$scope.Create = function (id){
        if (id === undefined) {
            $scope.data = "You must specify an id";
        } else {
                $scope.data = data;
                console.log(data);
            });
        }
    };

当调用进入Create函数时,id的值是未定义的.

如果我在Create函数的beginging中添加以下行,一切正常:

id = $('#id')[0].value;

如果我发送一个常量值,它可以工作:

<button data-action="bea" ng-click="Create('SomeID');" class="btn">Insert ID</button>

为什么会发生这种情况,如何在不将价值线放入方法的情况下做到这一点？

谢谢

所以我的问题是Controller构造函数执行多次.如果我有2 Directives与特定关联,Controller那么它运行2 + 1,如果3 Directives,然后3 + 1...等等.如果我在该控制器中有一个ajax请求来获取数据,那么它会运行那么多次并不是真正的必要...

为什么会这样？我非常担心它会使所有那些额外的不必要的ajax请求......

HTML:

 <span ng-controller="MenuController as MenuCtrl">
    <main-menu></main-menu>
 </span>

控制器:

  var howManyTimes = 0;
  angular.module("shredkit", ["myDirectives"])

  .controller("MenuController", function(){
    ++howManyTimes;
    console.log("HOW MANY TIMES? THAT MANY: " + howManyTimes )
  })

指示:

angular.module("myDirectives", [])

  .directive("mainMenu", function(){
    return{
      restrict:"E", // type of directive - 'E' - element
      templateUrl:'templates/main-menu.html',
      controller:"MenuController",
      controllerAs: "MenuCtrl"
    };
  })

例如,在本教程中,是否有任何方法可以在列页脚中获取数据？我想在其他地方展示总数. 提前致谢.

我正在尝试学习角度js.我能够得到输出.但是在控制台上我收到此错误.如何删除此错误？

 <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script type="application/javascript" src="ionic.js"></script>
    </head>
    <body ng-app="">
    {{3+8}}

    </body>
    </html>

我只是使用angular添加两个数字我能够得到预期的结果,但在控制台上得到这个错误.

我正在尝试编写一个元素指令,我将其附加到控制器,以实现类似排序的行为.这是指令

.directive('sorting', function () {
        return {
            restrict: 'E',
            scope: false, // I know I can omit this with no effect
            template: function (elem, attr) {
                return '<div><a href ng-click="setsort('+"'"+attr.sortkey+"'"+')">'+attr.headtext+'</a></div>'+
                      '<div ng-show="sortfield=='+"'"+attr.sortkey+"' || sortfield='-"+attr.sortkey+"'"+
                      '" ng-class="{'+"'sortreverse':sortreverse}"+'">&#9650;</div>';
                  }
            }
        });

setsort(sortkey),sortfield并且sortreverse属于控制器的范围.

预期的行为是,▲只有在为指定元素选择了排序时才应显示caret().

排序按计划工作,但插入符号显示在所有排序列中,我得到一个奇怪的错误消息,我没有找到任何可用的反馈.

错误说:

Error: [$parse:lval] Trying to assing a value to a non l-value
http://errors.angularjs.org/1.4.5/$parse/lval
minErr/
[....a whole stacktrace ...]
"<div ng-show="sortfield=='yn_equivalent' || sortfield='-yn_equivalent'" ng-class="{'sortreverse':sortreverse}">"

有趣的事实:错误的第一行实际上是由angularjs拼写错误的(应该assign代替assing)

当被召唤时,最后一行是指令生成的输出的一部分:

<sorting …