如何使用$resource将承诺表单控制器返回到angularjs中的指令

我希望承诺从控制器返回到指令，因为我希望根据收到的承诺更改模板

登录控制器：

(function() {
  angular.module('nd')
    .controller('LoginController', loginController);

  function loginController(
    $scope,
    modelFactory,
    User,
    APPLICATION,
    REST_URL,
    $resource
    ) {

    $scope.user = modelFactory.create('user', User);

    $scope.login = login;

    function login() {
      var resource = $resource(APPLICATION.host + REST_URL.login);
      var promise = resource.save($scope.user);
      return promise;
    }
  }
})();

(function() {
  angular.module('nd')
    .directive('ndButton', button);

  function button() {
    return {
      restrict: 'E',
      scope: {
        ndLable: '@',
        ndClick: '&'
      },
      templateUrl: '../components/fields/button/button.template.html',
      link: link
    };

    function link(scope) {
      scope.clickButton = function() {
        var promise = scope.ndClick();
        promise.$promise.then(function(user) {
          console.log(user);
        });
      };
    }
  }
})();

<form ng-submit="login()">
  <div class="input-container">
    <nd-text-box
      ng-model="user.username"
      nd-lable="Username"
      nd-id="Username"
      nd-required="required"></nd-text-box>
    <div class="bar"></div>
  </div>
  <div class="input-container">
    <nd-password
      ng-model="user.password"
      nd-lable="Password"
      nd-id="Password"
      nd-required="required"></nd-password>
    <div class="bar"></div>
  </div>
  <div class="button-container">
    <nd-button nd-lable="Go"></nd-button>
  </div>
  <div class="footer"><a href="#">Forgot your password?</a></div>
</form>

<button ng-click="clickButton()">
  <span>{{ndLable}}</span>
</button>

按钮指令：

(function() {
  angular.module('nd')
    .controller('LoginController', loginController);

  function loginController(
    $scope,
    modelFactory,
    User,
    APPLICATION,
    REST_URL,
    $resource
    ) {

    $scope.user = modelFactory.create('user', User);

    $scope.login = login;

    function login() {
      var resource = $resource(APPLICATION.host + REST_URL.login);
      var promise = resource.save($scope.user);
      return promise;
    }
  }
})();

(function() {
  angular.module('nd')
    .directive('ndButton', button);

  function button() {
    return {
      restrict: 'E',
      scope: {
        ndLable: '@',
        ndClick: '&'
      },
      templateUrl: '../components/fields/button/button.template.html',
      link: link
    };

    function link(scope) {
      scope.clickButton = function() {
        var promise = scope.ndClick();
        promise.$promise.then(function(user) {
          console.log(user);
        });
      };
    }
  }
})();

<form ng-submit="login()">
  <div class="input-container">
    <nd-text-box
      ng-model="user.username"
      nd-lable="Username"
      nd-id="Username"
      nd-required="required"></nd-text-box>
    <div class="bar"></div>
  </div>
  <div class="input-container">
    <nd-password
      ng-model="user.password"
      nd-lable="Password"
      nd-id="Password"
      nd-required="required"></nd-password>
    <div class="bar"></div>
  </div>
  <div class="button-container">
    <nd-button nd-lable="Go"></nd-button>
  </div>
  <div class="footer"><a href="#">Forgot your password?</a></div>
</form>

<button ng-click="clickButton()">
  <span>{{ndLable}}</span>
</button>

login.html:

(function() {
  angular.module('nd')
    .controller('LoginController', loginController);

  function loginController(
    $scope,
    modelFactory,
    User,
    APPLICATION,
    REST_URL,
    $resource
    ) {

    $scope.user = modelFactory.create('user', User);

    $scope.login = login;

    function login() {
      var resource = $resource(APPLICATION.host + REST_URL.login);
      var promise = resource.save($scope.user);
      return promise;
    }
  }
})();

(function() {
  angular.module('nd')
    .directive('ndButton', button);

  function button() {
    return {
      restrict: 'E',
      scope: {
        ndLable: '@',
        ndClick: '&'
      },
      templateUrl: '../components/fields/button/button.template.html',
      link: link
    };

    function link(scope) {
      scope.clickButton = function() {
        var promise = scope.ndClick();
        promise.$promise.then(function(user) {
          console.log(user);
        });
      };
    }
  }
})();

<form ng-submit="login()">
  <div class="input-container">
    <nd-text-box
      ng-model="user.username"
      nd-lable="Username"
      nd-id="Username"
      nd-required="required"></nd-text-box>
    <div class="bar"></div>
  </div>
  <div class="input-container">
    <nd-password
      ng-model="user.password"
      nd-lable="Password"
      nd-id="Password"
      nd-required="required"></nd-password>
    <div class="bar"></div>
  </div>
  <div class="button-container">
    <nd-button nd-lable="Go"></nd-button>
  </div>
  <div class="footer"><a href="#">Forgot your password?</a></div>
</form>

<button ng-click="clickButton()">
  <span>{{ndLable}}</span>
</button>

按钮模板：

(function() {
  angular.module('nd')
    .controller('LoginController', loginController);

  function loginController(
    $scope,
    modelFactory,
    User,
    APPLICATION,
    REST_URL,
    $resource
    ) {

    $scope.user = modelFactory.create('user', User);

    $scope.login = login;

    function login() {
      var resource = $resource(APPLICATION.host + REST_URL.login);
      var promise = resource.save($scope.user);
      return promise;
    }
  }
})();

(function() {
  angular.module('nd')
    .directive('ndButton', button);

  function button() {
    return {
      restrict: 'E',
      scope: {
        ndLable: '@',
        ndClick: '&'
      },
      templateUrl: '../components/fields/button/button.template.html',
      link: link
    };

    function link(scope) {
      scope.clickButton = function() {
        var promise = scope.ndClick();
        promise.$promise.then(function(user) {
          console.log(user);
        });
      };
    }
  }
})();

<form ng-submit="login()">
  <div class="input-container">
    <nd-text-box
      ng-model="user.username"
      nd-lable="Username"
      nd-id="Username"
      nd-required="required"></nd-text-box>
    <div class="bar"></div>
  </div>
  <div class="input-container">
    <nd-password
      ng-model="user.password"
      nd-lable="Password"
      nd-id="Password"
      nd-required="required"></nd-password>
    <div class="bar"></div>
  </div>
  <div class="button-container">
    <nd-button nd-lable="Go"></nd-button>
  </div>
  <div class="footer"><a href="#">Forgot your password?</a></div>
</form>

<button ng-click="clickButton()">
  <span>{{ndLable}}</span>
</button>

{{ndLable}}

在指令中，在

scope.ndClick（）

，它正在调用控制器的函数

login（）

。在控制器中，我得到

promise

作为

{$promise:promise，$resolved:false}

。

---

我在指令中返回了

promise

，但在指令中，我得到的promise是未定义的。

我无法告诉您为什么收到未定义的返回值。我做了一把小提琴，得到了同样的结果。我认为这是一个范围问题。也许其他人可以解释。但是，我建议使用工厂或服务来存储用户数据，这样您就可以在整个应用程序中使用它。这是一个使用工厂在多个控制器和指令/组件之间共享数据的提琴：

否则，您可以向指令范围添加额外的双向绑定以同步数据

function button() {
  return {
    restrict: 'E',
    scope: {
      ndLable: '@',
      ndClick: '&', 
      ndPromise: '='
    },
    templateUrl: '../components/fields/button/button.template.html',
    link: link
};

模板：

<button nd-promise="loginPromise" nd-click"login()">..</button>

---

我无法告诉您为什么接收未定义的返回值。我做了一把小提琴，得到了同样的结果。我认为这是一个范围问题。也许其他人可以解释。但是，我建议使用工厂或服务来存储用户数据，这样您就可以在整个应用程序中使用它。这是一个使用工厂在多个控制器和指令/组件之间共享数据的提琴：

否则，您可以向指令范围添加额外的双向绑定以同步数据

function button() {
  return {
    restrict: 'E',
    scope: {
      ndLable: '@',
      ndClick: '&', 
      ndPromise: '='
    },
    templateUrl: '../components/fields/button/button.template.html',
    link: link
};

模板：

<button nd-promise="loginPromise" nd-click"login()">..</button>

login.html

<div class="button-container">
    <nd-button nd-lable="Go" ndClick="login()"></nd-button>
</div>

将

$scope.login

方法绑定到

ndClick

login.html

<div class="button-container">
    <nd-button nd-lable="Go" ndClick="login()"></nd-button>
</div>

---

将

$scope.login

方法绑定到

ndClick

可以显示使用指令的登录模板吗？@war1oc，我已更新了我的问题。可以显示使用指令的登录模板吗？@war1oc，我已更新了我的问题。我想根据承诺更改按钮模板，所以我想要指令中的承诺，这样我就可以轻松地更改模板。更改我的答案。只需将promise

resource.save（$scope.user）。$promise

传递到数据中，它就会按预期工作。可能ndData是错误的名称。这是一个很好的技巧，如果我无法解决“返回未定义”的问题，我肯定会使用它。我想根据承诺更改按钮模板，所以我希望指令中的承诺，以便我可以轻松更改模板。更改我的答案。只需将promise

resource.save（$scope.user）。$promise

传递到数据中，它就会按预期工作。可能ndData的名称不对。这是一个很好的技巧，如果我无法解决“返回未定义”的问题，我肯定会使用它。它有效…你能解释为什么ng submit不起作用吗…？

ng submit

如果你有

type=“submit”

的输入，它会起作用。您还必须将函数发送到指令，使其与

&

绑定，以便您以后可以从指令控制器调用该函数。它可以工作…您能否解释ng submit不工作的原因…？

ng submit

将工作，如果您使用

type=“submit”

输入。您还必须将函数发送到指令，以便它与

&

绑定，以便以后可以从指令控制器调用函数。